@wix/design-system-tokens 1.14.0 → 1.14.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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +2 -2
  3. package/studio/all.st.css +47 -1
  4. package/studio/foundation.st.css +33 -1
  5. package/studio/semantic.st.css +14 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.14.2 - 2024-04-05
2
+
3
+ ### Features
4
+
5
+ - feat(Tokens): added missing studio shadow tokens [13573](https://github.com/wix-private/wix-design-systems/pull/13573)
6
+
1
7
  ## 1.6.0 - 2024-02-02
2
8
 
3
9
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.14.0",
3
+ "version": "1.14.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": "0945b2aacccb568048e45f648b108f2d2f23674361abb398e41e60ab"
36
+ "falconPackageHash": "f0ecf6e93e0fe1b7f4410d4f37afa8b53b73be0178a4185dd0133fd4"
37
37
  }
package/studio/all.st.css CHANGED
@@ -800,6 +800,29 @@
800
800
  @property st-global(--wds-shadow-200);
801
801
  @property st-global(--wds-shadow-300);
802
802
  @property st-global(--wds-shadow-400);
803
+ @property st-global(--wds-shadow-focus-destructive);
804
+ @property st-global(--wds-shadow-focus-standard);
805
+ @property st-global(--wds-shadow-focus-warning);
806
+ @property st-global(--wds-shadow-inner-100);
807
+ @property st-global(--wds-shadow-inner-200);
808
+ @property st-global(--wds-shadow-inner-300);
809
+ @property st-global(--wds-shadow-inner-300-bottom);
810
+ @property st-global(--wds-shadow-inner-300-horizontal);
811
+ @property st-global(--wds-shadow-inner-300-left);
812
+ @property st-global(--wds-shadow-inner-300-right);
813
+ @property st-global(--wds-shadow-inner-300-top);
814
+ @property st-global(--wds-shadow-inner-300-vertical);
815
+ @property st-global(--wds-shadow-inner-400);
816
+ @property st-global(--wds-shadow-inner-400-bottom);
817
+ @property st-global(--wds-shadow-inner-400-horizontal);
818
+ @property st-global(--wds-shadow-inner-400-left);
819
+ @property st-global(--wds-shadow-inner-400-right);
820
+ @property st-global(--wds-shadow-inner-400-top);
821
+ @property st-global(--wds-shadow-inner-400-vertical);
822
+ @property st-global(--wds-shadow-surface-modal);
823
+ @property st-global(--wds-shadow-surface-overlay);
824
+ @property st-global(--wds-shadow-surface-overlay-dark);
825
+ @property st-global(--wds-shadow-surface-raised);
803
826
  @property st-global(--wds-side-panel-content-padding-horizontal);
804
827
  @property st-global(--wds-side-panel-content-padding-vertical);
805
828
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
@@ -1139,7 +1162,7 @@
1139
1162
  --wds-circular-progress-bar-size-small: 24px;
1140
1163
  --wds-color-black-100: #131720;
1141
1164
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
1142
- --wds-color-black-100-transparent-5: rgba(19, 23, 32, .5);
1165
+ --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
1143
1166
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
1144
1167
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
1145
1168
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
@@ -1822,6 +1845,29 @@
1822
1845
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
1823
1846
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
1824
1847
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
1848
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1849
+ --wds-shadow-focus-standard: 0 0 0 3px #c3daff;
1850
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
1851
+ --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
1852
+ --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
1853
+ --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
1854
+ --wds-shadow-inner-300-bottom: 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1855
+ --wds-shadow-inner-300-horizontal: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset, -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1856
+ --wds-shadow-inner-300-left: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1857
+ --wds-shadow-inner-300-right: -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1858
+ --wds-shadow-inner-300-top: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1859
+ --wds-shadow-inner-300-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;
1860
+ --wds-shadow-inner-400: 0 0 24px rgba(19, 23, 32, .2) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
1861
+ --wds-shadow-inner-400-bottom: 0 -32px 24px -24px rgba(19, 23, 32, .2) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1862
+ --wds-shadow-inner-400-horizontal: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset, -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1863
+ --wds-shadow-inner-400-left: 32px 0 24px -24px rgba(19, 23, 32, .2) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1864
+ --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;
1865
+ --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;
1866
+ --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;
1867
+ --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
1868
+ --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
1869
+ --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
1870
+ --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
1825
1871
  --wds-side-panel-content-padding-horizontal: 24px;
1826
1872
  --wds-side-panel-content-padding-vertical: 24px;
1827
1873
  --wds-side-panel-control-layout-divider-border-width: 0;
package/studio/foundation.st.css CHANGED
@@ -129,6 +129,22 @@
129
129
  @property st-global(--wds-shadow-200);
130
130
  @property st-global(--wds-shadow-300);
131
131
  @property st-global(--wds-shadow-400);
132
+ @property st-global(--wds-shadow-inner-100);
133
+ @property st-global(--wds-shadow-inner-200);
134
+ @property st-global(--wds-shadow-inner-300);
135
+ @property st-global(--wds-shadow-inner-300-bottom);
136
+ @property st-global(--wds-shadow-inner-300-horizontal);
137
+ @property st-global(--wds-shadow-inner-300-left);
138
+ @property st-global(--wds-shadow-inner-300-right);
139
+ @property st-global(--wds-shadow-inner-300-top);
140
+ @property st-global(--wds-shadow-inner-300-vertical);
141
+ @property st-global(--wds-shadow-inner-400);
142
+ @property st-global(--wds-shadow-inner-400-bottom);
143
+ @property st-global(--wds-shadow-inner-400-horizontal);
144
+ @property st-global(--wds-shadow-inner-400-left);
145
+ @property st-global(--wds-shadow-inner-400-right);
146
+ @property st-global(--wds-shadow-inner-400-top);
147
+ @property st-global(--wds-shadow-inner-400-vertical);
132
148
  @property st-global(--wds-space-0);
133
149
  @property st-global(--wds-space-25);
134
150
  @property st-global(--wds-space-50);
@@ -172,7 +188,7 @@
172
188
  --wds-breakpoint-x-large: 1572px;
173
189
  --wds-color-black-100: #131720;
174
190
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
175
- --wds-color-black-100-transparent-5: rgba(19, 23, 32, .5);
191
+ --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
176
192
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
177
193
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
178
194
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
@@ -286,6 +302,22 @@
286
302
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
287
303
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
288
304
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
305
+ --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
306
+ --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
307
+ --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
308
+ --wds-shadow-inner-300-bottom: 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
309
+ --wds-shadow-inner-300-horizontal: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset, -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
310
+ --wds-shadow-inner-300-left: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset;
311
+ --wds-shadow-inner-300-right: -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
312
+ --wds-shadow-inner-300-top: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
313
+ --wds-shadow-inner-300-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;
314
+ --wds-shadow-inner-400: 0 0 24px rgba(19, 23, 32, .2) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
315
+ --wds-shadow-inner-400-bottom: 0 -32px 24px -24px rgba(19, 23, 32, .2) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
316
+ --wds-shadow-inner-400-horizontal: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset, -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
317
+ --wds-shadow-inner-400-left: 32px 0 24px -24px rgba(19, 23, 32, .2) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset;
318
+ --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;
319
+ --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;
320
+ --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;
289
321
  --wds-space-0: 0;
290
322
  --wds-space-25: 1px;
291
323
  --wds-space-50: 2px;
package/studio/semantic.st.css CHANGED
@@ -304,6 +304,13 @@
304
304
  @property st-global(--wds-font-weight-heading-4);
305
305
  @property st-global(--wds-font-weight-heading-5);
306
306
  @property st-global(--wds-font-weight-heading-6);
307
+ @property st-global(--wds-shadow-focus-destructive);
308
+ @property st-global(--wds-shadow-focus-standard);
309
+ @property st-global(--wds-shadow-focus-warning);
310
+ @property st-global(--wds-shadow-surface-modal);
311
+ @property st-global(--wds-shadow-surface-overlay);
312
+ @property st-global(--wds-shadow-surface-overlay-dark);
313
+ @property st-global(--wds-shadow-surface-raised);
307
314
  @property st-global(--wds-space-padding-horizontal-large);
308
315
  @property st-global(--wds-space-padding-horizontal-medium);
309
316
  @property st-global(--wds-space-padding-horizontal-small);
@@ -624,6 +631,13 @@
624
631
  --wds-font-weight-heading-4: 700;
625
632
  --wds-font-weight-heading-5: 700;
626
633
  --wds-font-weight-heading-6: 400;
634
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
635
+ --wds-shadow-focus-standard: 0 0 0 3px #c3daff;
636
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
637
+ --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
638
+ --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
639
+ --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
640
+ --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
627
641
  --wds-space-padding-horizontal-large: 24px;
628
642
  --wds-space-padding-horizontal-medium: 20px;
629
643
  --wds-space-padding-horizontal-small: 16px;