@wix/design-system-tokens 1.14.1 → 1.14.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/CHANGELOG.md +6 -0
  2. package/all.st.css +6 -0
  3. package/package.json +2 -2
  4. package/semantic.st.css +6 -0
  5. package/studio/all.st.css +53 -1
  6. package/studio/foundation.st.css +33 -1
  7. package/studio/semantic.st.css +20 -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/all.st.css CHANGED
@@ -805,6 +805,9 @@
805
805
  @property st-global(--wds-shadow-300);
806
806
  @property st-global(--wds-shadow-400);
807
807
  @property st-global(--wds-shadow-focus-destructive);
808
+ @property st-global(--wds-shadow-focus-inner-destructive);
809
+ @property st-global(--wds-shadow-focus-inner-standard);
810
+ @property st-global(--wds-shadow-focus-inner-warning);
808
811
  @property st-global(--wds-shadow-focus-standard);
809
812
  @property st-global(--wds-shadow-focus-warning);
810
813
  @property st-global(--wds-shadow-inner-100);
@@ -1854,6 +1857,9 @@
1854
1857
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
1855
1858
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
1856
1859
  --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1860
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
1861
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #a8caff inset;
1862
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #ffe2a5 inset;
1857
1863
  --wds-shadow-focus-standard: 0 0 0 3px #a8caff;
1858
1864
  --wds-shadow-focus-warning: 0 0 0 3px #ffe2a5;
1859
1865
  --wds-shadow-inner-100: 1px 1px 2px rgba(0, 6, 36, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.14.1",
3
+ "version": "1.14.3",
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": "02fb502f01b63b9c0c85a342e2a339bf56129563ed0a80fd7ea42a5b"
36
+ "falconPackageHash": "f03091197918f699ff350eb1f49f45ec7df1910c321002ba6d38124e"
37
37
  }
package/semantic.st.css CHANGED
@@ -309,6 +309,9 @@
309
309
  @property st-global(--wds-font-weight-heading-5);
310
310
  @property st-global(--wds-font-weight-heading-6);
311
311
  @property st-global(--wds-shadow-focus-destructive);
312
+ @property st-global(--wds-shadow-focus-inner-destructive);
313
+ @property st-global(--wds-shadow-focus-inner-standard);
314
+ @property st-global(--wds-shadow-focus-inner-warning);
312
315
  @property st-global(--wds-shadow-focus-standard);
313
316
  @property st-global(--wds-shadow-focus-warning);
314
317
  @property st-global(--wds-shadow-surface-modal);
@@ -640,6 +643,9 @@
640
643
  --wds-font-weight-heading-5: 400;
641
644
  --wds-font-weight-heading-6: 400;
642
645
  --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
646
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
647
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #a8caff inset;
648
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #ffe2a5 inset;
643
649
  --wds-shadow-focus-standard: 0 0 0 3px #a8caff;
644
650
  --wds-shadow-focus-warning: 0 0 0 3px #ffe2a5;
645
651
  --wds-shadow-surface-modal: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
package/studio/all.st.css CHANGED
@@ -800,6 +800,32 @@
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-inner-destructive);
805
+ @property st-global(--wds-shadow-focus-inner-standard);
806
+ @property st-global(--wds-shadow-focus-inner-warning);
807
+ @property st-global(--wds-shadow-focus-standard);
808
+ @property st-global(--wds-shadow-focus-warning);
809
+ @property st-global(--wds-shadow-inner-100);
810
+ @property st-global(--wds-shadow-inner-200);
811
+ @property st-global(--wds-shadow-inner-300);
812
+ @property st-global(--wds-shadow-inner-300-bottom);
813
+ @property st-global(--wds-shadow-inner-300-horizontal);
814
+ @property st-global(--wds-shadow-inner-300-left);
815
+ @property st-global(--wds-shadow-inner-300-right);
816
+ @property st-global(--wds-shadow-inner-300-top);
817
+ @property st-global(--wds-shadow-inner-300-vertical);
818
+ @property st-global(--wds-shadow-inner-400);
819
+ @property st-global(--wds-shadow-inner-400-bottom);
820
+ @property st-global(--wds-shadow-inner-400-horizontal);
821
+ @property st-global(--wds-shadow-inner-400-left);
822
+ @property st-global(--wds-shadow-inner-400-right);
823
+ @property st-global(--wds-shadow-inner-400-top);
824
+ @property st-global(--wds-shadow-inner-400-vertical);
825
+ @property st-global(--wds-shadow-surface-modal);
826
+ @property st-global(--wds-shadow-surface-overlay);
827
+ @property st-global(--wds-shadow-surface-overlay-dark);
828
+ @property st-global(--wds-shadow-surface-raised);
803
829
  @property st-global(--wds-side-panel-content-padding-horizontal);
804
830
  @property st-global(--wds-side-panel-content-padding-vertical);
805
831
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
@@ -1139,7 +1165,7 @@
1139
1165
  --wds-circular-progress-bar-size-small: 24px;
1140
1166
  --wds-color-black-100: #131720;
1141
1167
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
1142
- --wds-color-black-100-transparent-5: rgba(19, 23, 32, .5);
1168
+ --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
1143
1169
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
1144
1170
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
1145
1171
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
@@ -1822,6 +1848,32 @@
1822
1848
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
1823
1849
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
1824
1850
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
1851
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1852
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
1853
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #c3daff inset;
1854
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
1855
+ --wds-shadow-focus-standard: 0 0 0 3px #c3daff;
1856
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
1857
+ --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
1858
+ --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
1859
+ --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
1860
+ --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;
1861
+ --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;
1862
+ --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;
1863
+ --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;
1864
+ --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;
1865
+ --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;
1866
+ --wds-shadow-inner-400: 0 0 24px rgba(19, 23, 32, .2) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
1867
+ --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;
1868
+ --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;
1869
+ --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;
1870
+ --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;
1871
+ --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;
1872
+ --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;
1873
+ --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
1874
+ --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
1875
+ --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
1876
+ --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
1825
1877
  --wds-side-panel-content-padding-horizontal: 24px;
1826
1878
  --wds-side-panel-content-padding-vertical: 24px;
1827
1879
  --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,16 @@
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-inner-destructive);
309
+ @property st-global(--wds-shadow-focus-inner-standard);
310
+ @property st-global(--wds-shadow-focus-inner-warning);
311
+ @property st-global(--wds-shadow-focus-standard);
312
+ @property st-global(--wds-shadow-focus-warning);
313
+ @property st-global(--wds-shadow-surface-modal);
314
+ @property st-global(--wds-shadow-surface-overlay);
315
+ @property st-global(--wds-shadow-surface-overlay-dark);
316
+ @property st-global(--wds-shadow-surface-raised);
307
317
  @property st-global(--wds-space-padding-horizontal-large);
308
318
  @property st-global(--wds-space-padding-horizontal-medium);
309
319
  @property st-global(--wds-space-padding-horizontal-small);
@@ -624,6 +634,16 @@
624
634
  --wds-font-weight-heading-4: 700;
625
635
  --wds-font-weight-heading-5: 700;
626
636
  --wds-font-weight-heading-6: 400;
637
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
638
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
639
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #c3daff inset;
640
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
641
+ --wds-shadow-focus-standard: 0 0 0 3px #c3daff;
642
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
643
+ --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
644
+ --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
645
+ --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
646
+ --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
627
647
  --wds-space-padding-horizontal-large: 24px;
628
648
  --wds-space-padding-horizontal-medium: 20px;
629
649
  --wds-space-padding-horizontal-small: 16px;