@empathyco/x-components 6.0.0-alpha.68 → 6.0.0-alpha.69

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 (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/design-system/deprecated-full-theme.css +208 -208
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.0.0-alpha.69](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.68...@empathyco/x-components@6.0.0-alpha.69) (2025-04-28)
7
+
8
+ **Note:** Version bump only for package @empathyco/x-components
9
+
10
+
11
+
12
+
13
+
6
14
  ## [6.0.0-alpha.68](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.67...@empathyco/x-components@6.0.0-alpha.68) (2025-04-28)
7
15
 
8
16
  **Note:** Version bump only for package @empathyco/x-components
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+
2
3
  .x-uppercase {
3
4
  text-transform: uppercase;
4
5
  }
@@ -33,25 +34,6 @@
33
34
  -webkit-text-decoration-line: none;
34
35
  text-decoration-line: none;
35
36
  }
36
- .x-static {
37
- position: static !important;
38
- }
39
-
40
- .x-fixed {
41
- position: fixed !important;
42
- }
43
-
44
- .x-absolute {
45
- position: absolute !important;
46
- }
47
-
48
- .x-relative {
49
- position: relative !important;
50
- }
51
-
52
- .x-sticky {
53
- position: sticky !important;
54
- }
55
37
  .x-padding--00 {
56
38
  padding: 0 !important;
57
39
  }
@@ -955,6 +937,25 @@
955
937
  [dir="rtl"] .x-margin--left-20 {
956
938
  margin-right: var(--x-size-base-20) !important;
957
939
  }
940
+ .x-static {
941
+ position: static !important;
942
+ }
943
+
944
+ .x-fixed {
945
+ position: fixed !important;
946
+ }
947
+
948
+ .x-absolute {
949
+ position: absolute !important;
950
+ }
951
+
952
+ .x-relative {
953
+ position: relative !important;
954
+ }
955
+
956
+ .x-sticky {
957
+ position: sticky !important;
958
+ }
958
959
  .x-line-height--none {
959
960
  line-height: 1 !important;
960
961
  }
@@ -4539,6 +4540,14 @@
4539
4540
  --x-size-padding-row-05: var(--x-size-base-05);
4540
4541
  --x-size-padding-row-06: var(--x-size-base-06);
4541
4542
  }
4543
+ /* @deprecated */
4544
+ :root {
4545
+ --x-size-padding-row-02: var(--x-size-base-02);
4546
+ --x-size-padding-row-03: var(--x-size-base-03);
4547
+ --x-size-padding-row-04: var(--x-size-base-04);
4548
+ --x-size-padding-row-05: var(--x-size-base-05);
4549
+ --x-size-padding-row-06: var(--x-size-base-06);
4550
+ }
4542
4551
 
4543
4552
  /* @deprecated */
4544
4553
  .x-row--padding-02 {
@@ -4560,13 +4569,27 @@
4560
4569
  .x-row--padding-06 {
4561
4570
  --x-size-padding-row: var(--x-size-padding-row-06);
4562
4571
  }
4563
- /* @deprecated */
4564
4572
  :root {
4565
- --x-size-padding-row-02: var(--x-size-base-02);
4566
- --x-size-padding-row-03: var(--x-size-base-03);
4567
- --x-size-padding-row-04: var(--x-size-base-04);
4568
- --x-size-padding-row-05: var(--x-size-base-05);
4569
- --x-size-padding-row-06: var(--x-size-base-06);
4573
+ --x-size-gap-row-01: var(--x-size-base-01);
4574
+ --x-size-gap-row-02: var(--x-size-base-02);
4575
+ --x-size-gap-row-03: var(--x-size-base-03);
4576
+ --x-size-gap-row-04: var(--x-size-base-04);
4577
+ --x-size-gap-row-05: var(--x-size-base-05);
4578
+ --x-size-gap-row-06: var(--x-size-base-06);
4579
+ --x-size-gap-row-07: var(--x-size-base-07);
4580
+ --x-size-gap-row-08: var(--x-size-base-08);
4581
+ --x-size-gap-row-09: var(--x-size-base-09);
4582
+ --x-size-gap-row-10: var(--x-size-base-10);
4583
+ --x-size-gap-row-11: var(--x-size-base-11);
4584
+ --x-size-gap-row-12: var(--x-size-base-12);
4585
+ --x-size-gap-row-13: var(--x-size-base-13);
4586
+ --x-size-gap-row-14: var(--x-size-base-14);
4587
+ --x-size-gap-row-15: var(--x-size-base-15);
4588
+ --x-size-gap-row-16: var(--x-size-base-16);
4589
+ --x-size-gap-row-17: var(--x-size-base-17);
4590
+ --x-size-gap-row-18: var(--x-size-base-18);
4591
+ --x-size-gap-row-19: var(--x-size-base-19);
4592
+ --x-size-gap-row-20: var(--x-size-base-20);
4570
4593
  }
4571
4594
  :root {
4572
4595
  --x-size-gap-row-01: var(--x-size-base-01);
@@ -4823,28 +4846,6 @@
4823
4846
  --x-size-border-width-result-description-default: 0;
4824
4847
  --x-size-border-width-result-picture-default: 0;
4825
4848
  }
4826
- :root {
4827
- --x-size-gap-row-01: var(--x-size-base-01);
4828
- --x-size-gap-row-02: var(--x-size-base-02);
4829
- --x-size-gap-row-03: var(--x-size-base-03);
4830
- --x-size-gap-row-04: var(--x-size-base-04);
4831
- --x-size-gap-row-05: var(--x-size-base-05);
4832
- --x-size-gap-row-06: var(--x-size-base-06);
4833
- --x-size-gap-row-07: var(--x-size-base-07);
4834
- --x-size-gap-row-08: var(--x-size-base-08);
4835
- --x-size-gap-row-09: var(--x-size-base-09);
4836
- --x-size-gap-row-10: var(--x-size-base-10);
4837
- --x-size-gap-row-11: var(--x-size-base-11);
4838
- --x-size-gap-row-12: var(--x-size-base-12);
4839
- --x-size-gap-row-13: var(--x-size-base-13);
4840
- --x-size-gap-row-14: var(--x-size-base-14);
4841
- --x-size-gap-row-15: var(--x-size-base-15);
4842
- --x-size-gap-row-16: var(--x-size-base-16);
4843
- --x-size-gap-row-17: var(--x-size-base-17);
4844
- --x-size-gap-row-18: var(--x-size-base-18);
4845
- --x-size-gap-row-19: var(--x-size-base-19);
4846
- --x-size-gap-row-20: var(--x-size-base-20);
4847
- }
4848
4849
  :root {
4849
4850
  --x-color-border-result-default: var(--x-color-base-lead);
4850
4851
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -7103,6 +7104,22 @@
7103
7104
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7104
7105
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7105
7106
  }
7107
+ :root {
7108
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7109
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7110
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7111
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7112
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7113
+ }
7114
+
7115
+ .x-input--pill.x-input,
7116
+ .x-input--pill .x-input {
7117
+ --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
7118
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
7119
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
7120
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
7121
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
7122
+ }
7106
7123
  :root {
7107
7124
  --x-size-padding-top-input-line: var(--x-size-base-03);
7108
7125
  --x-size-padding-right-input-line: 0;
@@ -7272,20 +7289,11 @@
7272
7289
  line-height: var(--x-size-line-height-input-placeholder-default);
7273
7290
  }
7274
7291
  :root {
7275
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7276
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7277
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7278
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7279
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7280
- }
7281
-
7282
- .x-input--pill.x-input,
7283
- .x-input--pill .x-input {
7284
- --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
7285
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
7286
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
7287
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
7288
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
7292
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7293
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7294
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7295
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7296
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7289
7297
  }
7290
7298
  :root {
7291
7299
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
@@ -7307,17 +7315,14 @@
7307
7315
  --x-size-border-radius-bottom-left-input-card
7308
7316
  );
7309
7317
  }
7310
- :root {
7311
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7312
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7313
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7314
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7315
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7316
- }
7317
7318
  :root {
7318
7319
  --x-size-width-icon-xl: var(--x-size-base-07);
7319
7320
  --x-size-height-icon-xl: var(--x-size-base-07);
7320
7321
  }
7322
+ :root {
7323
+ --x-size-width-icon-s: var(--x-size-base-03);
7324
+ --x-size-height-icon-s: var(--x-size-base-03);
7325
+ }
7321
7326
  :root {
7322
7327
  --x-size-width-icon-xl: var(--x-size-base-07);
7323
7328
  --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7331,10 +7336,6 @@
7331
7336
  --x-size-width-icon-s: var(--x-size-base-03);
7332
7337
  --x-size-height-icon-s: var(--x-size-base-03);
7333
7338
  }
7334
- :root {
7335
- --x-size-width-icon-s: var(--x-size-base-03);
7336
- --x-size-height-icon-s: var(--x-size-base-03);
7337
- }
7338
7339
 
7339
7340
  .x-icon--s {
7340
7341
  --x-size-width-icon-default: var(--x-size-width-icon-s);
@@ -7436,12 +7437,6 @@
7436
7437
  .x-grid-list--cols-auto .x-grid-list__item {
7437
7438
  min-width: var(--x-size-min-width-grid-item);
7438
7439
  }
7439
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7440
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7441
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7442
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7443
- margin-left: auto;
7444
- }
7445
7440
  :root {
7446
7441
  --x-size-margin-filter-children: 0;
7447
7442
  --x-size-padding-top-filter-children: 0;
@@ -7449,6 +7444,12 @@
7449
7444
  --x-size-padding-bottom-filter-children: 0;
7450
7445
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7451
7446
  }
7447
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7448
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7449
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7450
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7451
+ margin-left: auto;
7452
+ }
7452
7453
  :root {
7453
7454
  --x-size-margin-filter-children: 0;
7454
7455
  --x-size-padding-top-filter-children: 0;
@@ -7888,18 +7889,6 @@
7888
7889
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7889
7890
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7890
7891
  }
7891
- :root {
7892
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7893
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7894
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7895
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7896
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7897
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7898
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7899
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7900
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7901
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7902
- }
7903
7892
 
7904
7893
  .x-facet--card.x-facet,
7905
7894
  .x-facet--card .x-facet {
@@ -7914,6 +7903,18 @@
7914
7903
  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
7915
7904
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
7916
7905
  }
7906
+ :root {
7907
+ --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7908
+ --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7909
+ --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7910
+ --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7911
+ --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7912
+ --x-size-padding-facet-header-card: var(--x-size-base-03);
7913
+ --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7914
+ --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7915
+ --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7916
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7917
+ }
7917
7918
  :root {
7918
7919
  --x-size-width-dropdown-xl: 282px;
7919
7920
  }
@@ -7990,6 +7991,30 @@
7990
7991
  :root {
7991
7992
  --x-size-width-dropdown-m: 130px;
7992
7993
  }
7994
+ :root {
7995
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7996
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7997
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7998
+ --x-size-padding-right-dropdown-item-line: 0;
7999
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8000
+ --x-size-padding-left-dropdown-item-line: 0;
8001
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8002
+ --x-size-padding-right-dropdown-toggle-line: 0;
8003
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8004
+ --x-size-padding-left-dropdown-toggle-line: 0;
8005
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8006
+ --x-size-border-width-top-dropdown-toggle-line: 0;
8007
+ --x-size-border-width-right-dropdown-toggle-line: 0;
8008
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
8009
+ --x-size-border-width-dropdown-toggle-line
8010
+ );
8011
+ --x-size-border-width-left-dropdown-toggle-line: 0;
8012
+ --x-size-border-width-dropdown-list-line: 0;
8013
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8014
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8015
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8016
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8017
+ }
7993
8018
  :root {
7994
8019
  --x-size-width-dropdown-m: 130px;
7995
8020
  }
@@ -8060,30 +8085,6 @@
8060
8085
  --x-size-border-width-left-dropdown-list-line
8061
8086
  );
8062
8087
  }
8063
- :root {
8064
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8065
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
8066
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
8067
- --x-size-padding-right-dropdown-item-line: 0;
8068
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8069
- --x-size-padding-left-dropdown-item-line: 0;
8070
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8071
- --x-size-padding-right-dropdown-toggle-line: 0;
8072
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8073
- --x-size-padding-left-dropdown-toggle-line: 0;
8074
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8075
- --x-size-border-width-top-dropdown-toggle-line: 0;
8076
- --x-size-border-width-right-dropdown-toggle-line: 0;
8077
- --x-size-border-width-bottom-dropdown-toggle-line: var(
8078
- --x-size-border-width-dropdown-toggle-line
8079
- );
8080
- --x-size-border-width-left-dropdown-toggle-line: 0;
8081
- --x-size-border-width-dropdown-list-line: 0;
8082
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8083
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8084
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8085
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8086
- }
8087
8088
  :root {
8088
8089
  --x-size-width-dropdown-l: 202px;
8089
8090
  }
@@ -8475,16 +8476,6 @@
8475
8476
  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8476
8477
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8477
8478
  }
8478
- :root {
8479
- --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8480
- --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8481
- --x-color-text-button-tertiary: var(--x-color-text-default);
8482
- --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8483
- --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8484
- --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8485
- --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8486
- --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8487
- }
8488
8479
 
8489
8480
  .x-button--tertiary.x-button,
8490
8481
  .x-button--tertiary .x-button {
@@ -8496,6 +8487,16 @@
8496
8487
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8497
8488
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8498
8489
  }
8490
+ :root {
8491
+ --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8492
+ --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8493
+ --x-color-text-button-tertiary: var(--x-color-text-default);
8494
+ --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8495
+ --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8496
+ --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8497
+ --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8498
+ --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8499
+ }
8499
8500
  :root {
8500
8501
  --x-color-background-button-secondary: transparent;
8501
8502
  --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8506,13 +8507,6 @@
8506
8507
  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8507
8508
  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8508
8509
  }
8509
- :root {
8510
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8511
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8512
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8513
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8514
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8515
- }
8516
8510
  :root {
8517
8511
  --x-color-background-button-secondary: transparent;
8518
8512
  --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8541,6 +8535,13 @@
8541
8535
  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8542
8536
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8543
8537
  }
8538
+ :root {
8539
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8540
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8541
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8542
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8543
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8544
+ }
8544
8545
 
8545
8546
  .x-button--round.x-button,
8546
8547
  .x-button--round .x-button {
@@ -8597,6 +8598,11 @@
8597
8598
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8598
8599
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8599
8600
  }
8601
+ :root {
8602
+ --x-color-background-button-ghost: transparent;
8603
+ --x-color-border-button-ghost: transparent;
8604
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8605
+ }
8600
8606
  :root {
8601
8607
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8602
8608
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8624,11 +8630,6 @@
8624
8630
  --x-color-border-button-ghost: transparent;
8625
8631
  --x-color-text-button-ghost: var(--x-color-base-lead);
8626
8632
  }
8627
- :root {
8628
- --x-color-background-button-ghost: transparent;
8629
- --x-color-border-button-ghost: transparent;
8630
- --x-color-text-button-ghost: var(--x-color-base-lead);
8631
- }
8632
8633
 
8633
8634
  .x-button--ghost.x-button,
8634
8635
  .x-button--ghost .x-button {
@@ -8669,28 +8670,6 @@
8669
8670
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8670
8671
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8671
8672
  }
8672
- :root {
8673
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8674
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8675
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8676
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8677
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8678
- }
8679
-
8680
- .x-button--card.x-button,
8681
- .x-button--card .x-button {
8682
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8683
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8684
- --x-size-border-radius-top-right-button-default: var(
8685
- --x-size-border-radius-top-right-button-card
8686
- );
8687
- --x-size-border-radius-bottom-right-button-default: var(
8688
- --x-size-border-radius-bottom-right-button-card
8689
- );
8690
- --x-size-border-radius-bottom-left-button-default: var(
8691
- --x-size-border-radius-bottom-left-button-card
8692
- );
8693
- }
8694
8673
  :root {
8695
8674
  --x-color-background-button-default: var(--x-color-base-lead);
8696
8675
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8776,6 +8755,35 @@
8776
8755
  margin-right: var(--x-size-gap-button-default);
8777
8756
  }
8778
8757
  }
8758
+ :root {
8759
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8760
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8761
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8762
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8763
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8764
+ }
8765
+ :root {
8766
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8767
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8768
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8769
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8770
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8771
+ }
8772
+
8773
+ .x-button--card.x-button,
8774
+ .x-button--card .x-button {
8775
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8776
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8777
+ --x-size-border-radius-top-right-button-default: var(
8778
+ --x-size-border-radius-top-right-button-card
8779
+ );
8780
+ --x-size-border-radius-bottom-right-button-default: var(
8781
+ --x-size-border-radius-bottom-right-button-card
8782
+ );
8783
+ --x-size-border-radius-bottom-left-button-default: var(
8784
+ --x-size-border-radius-bottom-left-button-card
8785
+ );
8786
+ }
8779
8787
  :root {
8780
8788
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8781
8789
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8786,56 +8794,6 @@
8786
8794
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8787
8795
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8788
8796
  }
8789
-
8790
- :root {
8791
- --x-size-base-01: 2px;
8792
- --x-size-base-02: 4px;
8793
- --x-size-base-03: 8px;
8794
- --x-size-base-04: 12px;
8795
- --x-size-base-05: 16px;
8796
- --x-size-base-06: 24px;
8797
- --x-size-base-07: 32px;
8798
- --x-size-base-08: 40px;
8799
- --x-size-base-09: 48px;
8800
- --x-size-base-10: 56px;
8801
- --x-size-base-11: 64px;
8802
- --x-size-base-12: 80px;
8803
- --x-size-base-13: 80px;
8804
- --x-size-base-14: 96px;
8805
- --x-size-base-15: 128px;
8806
- --x-size-base-16: 152px;
8807
- --x-size-base-17: 184px;
8808
- --x-size-base-18: 216px;
8809
- --x-size-base-19: 280px;
8810
- --x-size-base-20: 344px;
8811
- }
8812
- :root {
8813
- --x-color-base-lead: #243d48;
8814
- --x-color-base-auxiliary: #bfe1ec;
8815
- --x-color-base-neutral-10: #1a1a1a;
8816
- --x-color-base-neutral-35: #595959;
8817
- --x-color-base-neutral-70: #b3b3b3;
8818
- --x-color-base-neutral-95: #f2f2f2;
8819
- --x-color-base-neutral-100: #ffffff;
8820
- --x-color-base-accent: #0086b2;
8821
- --x-color-base-enable: #00705c;
8822
- --x-color-base-disable: #e11f26;
8823
- --x-color-base-transparent: transparent;
8824
- }
8825
- :root {
8826
- --x-size-border-radius-base-none: 0;
8827
- --x-size-border-radius-base-s: var(--x-size-base-02);
8828
- --x-size-border-radius-base-m: var(--x-size-base-06);
8829
- --x-size-border-radius-base-pill: 99999px;
8830
- --x-size-border-width-base: 1px;
8831
- }
8832
- :root {
8833
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8834
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8835
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8836
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8837
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8838
- }
8839
8797
  :root {
8840
8798
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8841
8799
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8884,4 +8842,46 @@
8884
8842
 
8885
8843
  .x-badge-container {
8886
8844
  position: relative;
8845
+ }
8846
+ :root {
8847
+ --x-size-base-01: 2px;
8848
+ --x-size-base-02: 4px;
8849
+ --x-size-base-03: 8px;
8850
+ --x-size-base-04: 12px;
8851
+ --x-size-base-05: 16px;
8852
+ --x-size-base-06: 24px;
8853
+ --x-size-base-07: 32px;
8854
+ --x-size-base-08: 40px;
8855
+ --x-size-base-09: 48px;
8856
+ --x-size-base-10: 56px;
8857
+ --x-size-base-11: 64px;
8858
+ --x-size-base-12: 80px;
8859
+ --x-size-base-13: 80px;
8860
+ --x-size-base-14: 96px;
8861
+ --x-size-base-15: 128px;
8862
+ --x-size-base-16: 152px;
8863
+ --x-size-base-17: 184px;
8864
+ --x-size-base-18: 216px;
8865
+ --x-size-base-19: 280px;
8866
+ --x-size-base-20: 344px;
8867
+ }
8868
+ :root {
8869
+ --x-color-base-lead: #243d48;
8870
+ --x-color-base-auxiliary: #bfe1ec;
8871
+ --x-color-base-neutral-10: #1a1a1a;
8872
+ --x-color-base-neutral-35: #595959;
8873
+ --x-color-base-neutral-70: #b3b3b3;
8874
+ --x-color-base-neutral-95: #f2f2f2;
8875
+ --x-color-base-neutral-100: #ffffff;
8876
+ --x-color-base-accent: #0086b2;
8877
+ --x-color-base-enable: #00705c;
8878
+ --x-color-base-disable: #e11f26;
8879
+ --x-color-base-transparent: transparent;
8880
+ }
8881
+ :root {
8882
+ --x-size-border-radius-base-none: 0;
8883
+ --x-size-border-radius-base-s: var(--x-size-base-02);
8884
+ --x-size-border-radius-base-m: var(--x-size-base-06);
8885
+ --x-size-border-radius-base-pill: 99999px;
8886
+ --x-size-border-width-base: 1px;
8887
8887
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.68",
3
+ "version": "6.0.0-alpha.69",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -106,7 +106,7 @@
106
106
  "@types/node": "18.19.0",
107
107
  "@types/testing-library__jest-dom": "5.14.9",
108
108
  "@vitejs/plugin-vue": "5.2.1",
109
- "@vue/test-utils": "~2.4.6",
109
+ "@vue/test-utils": "2.4.6",
110
110
  "@vue/vue3-jest": "27.0.0",
111
111
  "autoprefixer": "10.4.4",
112
112
  "convert-source-map": "2.0.0",
@@ -142,5 +142,5 @@
142
142
  "access": "public",
143
143
  "directory": "dist"
144
144
  },
145
- "gitHead": "d0779070dca788950d4a4e0306a131694da0a4bf"
145
+ "gitHead": "89503838d2387c171b8ceec53603135bb80283f1"
146
146
  }