@empathyco/x-components 3.0.0-alpha.301 → 3.0.0-alpha.302

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 (20) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/design-system/default-theme.css +21 -36
  3. package/design-system/deprecated-full-theme.css +8 -2
  4. package/design-system/full-theme.css +617 -633
  5. package/docs/API-reference/components/common/result/x-components.base-result-image.md +2 -2
  6. package/js/components/result/base-result-fallback-image.vue.js +6 -5
  7. package/js/components/result/base-result-fallback-image.vue.js.map +1 -1
  8. package/js/components/result/base-result-fallback-image.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  9. package/js/components/result/base-result-image.vue.js +3 -2
  10. package/js/components/result/base-result-image.vue.js.map +1 -1
  11. package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  12. package/js/components/result/base-result-image.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
  13. package/js/components/result/base-result-placeholder-image.vue.js +6 -5
  14. package/js/components/result/base-result-placeholder-image.vue.js.map +1 -1
  15. package/js/components/result/base-result-placeholder-image.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  16. package/package.json +3 -3
  17. package/types/components/result/base-result-fallback-image.vue.d.ts.map +1 -1
  18. package/types/components/result/base-result-image.vue.d.ts.map +1 -1
  19. package/types/components/result/base-result-placeholder-image.vue.d.ts.map +1 -1
  20. package/design-system/picture-default.css +0 -15
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.302](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.301...@empathyco/x-components@3.0.0-alpha.302) (2023-01-26)
7
+
8
+ ### ⚠ BREAKING CHANGES
9
+
10
+ - **components:** class `x-picture__image` renamed to `x-picture-image`, deprecate classes
11
+ `x-picture__image--placeholder` and `x-picture__image--fallback`
12
+
13
+ ### Features
14
+
15
+ - **components:** deprecate x-picture\_\_image and placeholder/fallback styles (#1036)
16
+ ([73a08a5](https://github.com/empathyco/x/commit/73a08a576b3f9b715cccefee8cb452d00cd45bcb)),
17
+ closes [EX-7888](https://searchbroker.atlassian.net/browse/EX-7888)
18
+
19
+ # Change Log
20
+
21
+ All notable changes to this project will be documented in this file. See
22
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
23
+
6
24
  ## [3.0.0-alpha.301](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.300...@empathyco/x-components@3.0.0-alpha.301) (2023-01-25)
7
25
 
8
26
  ### Documentation
package/design-system/default-theme.css CHANGED
@@ -1330,27 +1330,6 @@
1330
1330
  .x-message > p {
1331
1331
  margin: 0;
1332
1332
  }
1333
- :root {
1334
- --x-string-justify-message-default: center;
1335
- --x-size-gap-message-default: var(--x-size-base-03);
1336
- --x-size-padding-message-default: var(--x-size-base-06);
1337
- --x-color-background-message-default: var(--x-color-base-neutral-95);
1338
- --x-color-border-message-default: var(--x-color-background-message-default);
1339
- --x-color-text-message-default: var(--x-color-text-default);
1340
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
1341
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
1342
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
1343
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
1344
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
1345
- --x-size-border-width-message-default: var(--x-size-border-width-base);
1346
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
1347
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
1348
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
1349
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
1350
- --x-font-family-message-default: var(--x-font-family-title3);
1351
- --x-size-font-message-default: var(--x-size-font-title3);
1352
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
1353
- }
1354
1333
  :root {
1355
1334
  --x-color-background-option-list-button-default: transparent;
1356
1335
  --x-color-border-option-list-button-default: transparent;
@@ -1623,21 +1602,6 @@
1623
1602
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
1624
1603
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
1625
1604
  }
1626
- .x-picture__image {
1627
- width: 100%;
1628
- height: 100%;
1629
- }
1630
- .x-picture__image--fallback, .x-picture__image--placeholder {
1631
- object-fit: contain;
1632
- background-color: var(--x-color-base-neutral-95);
1633
- mix-blend-mode: normal;
1634
- }
1635
- .x-picture__image--fallback > rect, .x-picture__image--placeholder > rect {
1636
- fill: var(--x-color-base-neutral-95);
1637
- }
1638
- .x-picture__image--fallback > path, .x-picture__image--placeholder > path {
1639
- fill: var(--x-color-base-neutral-70);
1640
- }
1641
1605
  :root {
1642
1606
  --x-color-border-result-default: var(--x-color-base-lead);
1643
1607
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -2198,4 +2162,25 @@
2198
2162
  --x-size-base-18: 216px;
2199
2163
  --x-size-base-19: 280px;
2200
2164
  --x-size-base-20: 344px;
2165
+ }
2166
+ :root {
2167
+ --x-string-justify-message-default: center;
2168
+ --x-size-gap-message-default: var(--x-size-base-03);
2169
+ --x-size-padding-message-default: var(--x-size-base-06);
2170
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
2171
+ --x-color-border-message-default: var(--x-color-background-message-default);
2172
+ --x-color-text-message-default: var(--x-color-text-default);
2173
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
2174
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
2175
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
2176
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
2177
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
2178
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
2179
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
2180
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
2181
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
2182
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
2183
+ --x-font-family-message-default: var(--x-font-family-title3);
2184
+ --x-size-font-message-default: var(--x-size-font-title3);
2185
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
2201
2186
  }
package/design-system/deprecated-full-theme.css CHANGED
@@ -318,12 +318,16 @@
318
318
  }
319
319
  .x-picture__image {
320
320
  display: block;
321
+ width: 100%;
322
+ height: 100%;
321
323
  object-fit: var(--x-object-fit-picture-default);
322
324
  mix-blend-mode: var(--x-mix-blend-mode-picture-default);
323
325
  }
324
326
  .x-picture__image--fallback {
325
327
  --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default) !important;
326
- --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default) !important;
328
+ --x-mix-blend-mode-picture-default: var(
329
+ --x-mix-blend-mode-picture-fallback-default
330
+ ) !important;
327
331
  }
328
332
  .x-picture__image--fallback > rect {
329
333
  fill: var(--x-color-fill-picture-fallback-rect-default) !important;
@@ -333,7 +337,9 @@
333
337
  }
334
338
  .x-picture__image--placeholder {
335
339
  --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default) !important;
336
- --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default) !important;
340
+ --x-mix-blend-mode-picture-default: var(
341
+ --x-mix-blend-mode-picture-placeholder-default
342
+ ) !important;
337
343
  }
338
344
  .x-picture__image--placeholder > rect {
339
345
  fill: var(--x-color-fill-picture-placeholder-rect-default) !important;