@empathyco/x-components 3.0.0-alpha.217 → 3.0.0-alpha.219

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 (33) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/design-system/default-theme.css +0 -108
  3. package/design-system/deprecated-full-theme.css +239 -0
  4. package/design-system/full-theme.css +16 -238
  5. package/docs/API-reference/api/x-adapter-platform.platformbanner.md +1 -1
  6. package/docs/API-reference/api/x-adapter-platform.platformbanner.tagging.md +2 -1
  7. package/docs/API-reference/api/x-components.createtrackwire.md +26 -0
  8. package/docs/API-reference/api/x-components.md +2 -0
  9. package/docs/API-reference/api/x-components.trackaddtocartwire.md +1 -1
  10. package/docs/API-reference/api/x-components.trackbannerclickedwire.md +13 -0
  11. package/docs/API-reference/api/x-components.trackresultclickedwire.md +1 -1
  12. package/js/index.js +1 -1
  13. package/js/x-modules/search/components/banner.vue.js +12 -1
  14. package/js/x-modules/search/components/banner.vue.js.map +1 -1
  15. package/js/x-modules/search/components/banner.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  16. package/js/x-modules/tagging/wiring.js +16 -7
  17. package/js/x-modules/tagging/wiring.js.map +1 -1
  18. package/package.json +4 -4
  19. package/report/x-adapter-platform.api.json +1 -1
  20. package/report/x-components.api.json +101 -4
  21. package/report/x-components.api.md +17 -5
  22. package/tagging/index.js +1 -1
  23. package/types/x-modules/search/components/banner.vue.d.ts.map +1 -1
  24. package/types/x-modules/tagging/wiring.d.ts +25 -7
  25. package/types/x-modules/tagging/wiring.d.ts.map +1 -1
  26. package/design-system/button-card.css +0 -22
  27. package/design-system/button-default.css +0 -85
  28. package/design-system/button-ghost.css +0 -22
  29. package/design-system/button-pill.css +0 -22
  30. package/design-system/button-primary.css +0 -21
  31. package/design-system/button-round.css +0 -25
  32. package/design-system/button-secondary.css +0 -21
  33. package/design-system/button-tertiary.css +0 -21
package/CHANGELOG.md CHANGED
@@ -3,6 +3,36 @@
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.219](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.218...@empathyco/x-components@3.0.0-alpha.219) (2022-11-09)
7
+
8
+ ### Features
9
+
10
+ - **tagging:** track banner clicks (#822)
11
+ ([504d6bf](https://github.com/empathyco/x/commit/504d6bf29ca86ece7b8116cb32a676f05624468d))
12
+
13
+ # Change Log
14
+
15
+ All notable changes to this project will be documented in this file. See
16
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
17
+
18
+ ## [3.0.0-alpha.218](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.217...@empathyco/x-components@3.0.0-alpha.218) (2022-11-09)
19
+
20
+ ### ⚠ BREAKING CHANGES
21
+
22
+ - **design-system:** the old design system button styles are now located in the
23
+ `deprecated-full-theme.css`, if a setup is not using the new design system, it must import this
24
+ file.
25
+
26
+ ### Features
27
+
28
+ - **design-system:** deprecate old design system button styles (#830)
29
+ ([78fbf63](https://github.com/empathyco/x/commit/78fbf63116a9312e361540388b2573e0939dc7ae))
30
+
31
+ # Change Log
32
+
33
+ All notable changes to this project will be documented in this file. See
34
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
35
+
6
36
  ## [3.0.0-alpha.217](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.216...@empathyco/x-components@3.0.0-alpha.217) (2022-11-08)
7
37
 
8
38
  ### Bug Fixes
package/design-system/default-theme.css CHANGED
@@ -57,114 +57,6 @@
57
57
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
58
58
  --x-size-font-badge-default: var(--x-size-font-base-xs);
59
59
  }
60
- :root {
61
- --x-color-background-button-default: var(--x-color-base-lead);
62
- --x-color-border-button-default: var(--x-color-background-button-default);
63
- --x-color-text-button-default: var(--x-color-base-neutral-100);
64
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
65
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
66
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
67
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
68
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
69
- --x-size-border-width-button-default: var(--x-size-border-width-base);
70
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
71
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
72
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
73
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
74
- --x-size-height-button-default: var(--x-size-base-08);
75
- --x-size-padding-right-button-default: var(--x-size-base-05);
76
- --x-size-padding-left-button-default: var(--x-size-base-05);
77
- --x-size-gap-button-default: var(--x-size-base-03);
78
- --x-font-family-button-default: var(--x-font-family-text);
79
- --x-size-font-button-default: var(--x-size-font-text);
80
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
81
- --x-size-line-height-button-default: var(--x-size-line-height-text);
82
- }
83
-
84
- [dir="ltr"] .x-button {
85
- padding-right: var(--x-size-padding-right-button-default);
86
- }
87
-
88
- [dir="rtl"] .x-button {
89
- padding-left: var(--x-size-padding-right-button-default);
90
- }
91
-
92
- [dir="ltr"] .x-button {
93
- padding-left: var(--x-size-padding-left-button-default);
94
- }
95
-
96
- [dir="rtl"] .x-button {
97
- padding-right: var(--x-size-padding-left-button-default);
98
- }
99
-
100
- [dir="ltr"] .x-button {
101
- border-left-width: var(--x-size-border-width-left-button-default);
102
- }
103
-
104
- [dir="rtl"] .x-button {
105
- border-right-width: var(--x-size-border-width-left-button-default);
106
- }
107
-
108
- [dir="ltr"] .x-button {
109
- border-right-width: var(--x-size-border-width-right-button-default);
110
- }
111
-
112
- [dir="rtl"] .x-button {
113
- border-left-width: var(--x-size-border-width-right-button-default);
114
- }
115
-
116
- .x-button {
117
- display: inline-flex;
118
- justify-content: center;
119
- align-items: center;
120
- box-sizing: border-box;
121
- margin: 0;
122
- gap: var(--x-size-gap-button-default);
123
- min-height: var(--x-size-height-button-default);
124
- background-color: var(--x-color-background-button-default);
125
- border-color: var(--x-color-border-button-default);
126
- color: var(--x-color-text-button-default);
127
- border-style: solid;
128
- border-top-width: var(--x-size-border-width-top-button-default);
129
- border-bottom-width: var(--x-size-border-width-bottom-button-default);
130
- border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
131
- font-family: var(--x-font-family-button-default);
132
- font-size: var(--x-size-font-button-default);
133
- font-weight: var(--x-number-font-weight-button-default);
134
- line-height: var(--x-size-line-height-button-default);
135
- cursor: pointer;
136
- }
137
- @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
138
- .x-button {
139
- gap: 0;
140
- }
141
- .x-button > *:not(:last-child) {
142
- margin-right: var(--x-size-gap-button-default);
143
- }
144
- }
145
- :root {
146
- --x-color-background-button-default: var(--x-color-base-lead);
147
- --x-color-border-button-default: var(--x-color-background-button-default);
148
- --x-color-text-button-default: var(--x-color-base-neutral-100);
149
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
150
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
151
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
152
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
153
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
154
- --x-size-border-width-button-default: var(--x-size-border-width-base);
155
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
156
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
157
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
158
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
159
- --x-size-height-button-default: var(--x-size-base-08);
160
- --x-size-padding-right-button-default: var(--x-size-base-05);
161
- --x-size-padding-left-button-default: var(--x-size-base-05);
162
- --x-size-gap-button-default: var(--x-size-base-03);
163
- --x-font-family-button-default: var(--x-font-family-text);
164
- --x-size-font-button-default: var(--x-size-font-text);
165
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
166
- --x-size-line-height-button-default: var(--x-size-line-height-text);
167
- }
168
60
  :root {
169
61
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
170
62
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
package/design-system/deprecated-full-theme.css ADDED
@@ -0,0 +1,239 @@
1
+ :root {
2
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
3
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
4
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
5
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
6
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
7
+ }
8
+
9
+ .x-button--card.x-button,
10
+ .x-button--card .x-button {
11
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
12
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
13
+ --x-size-border-radius-top-right-button-default: var(
14
+ --x-size-border-radius-top-right-button-card
15
+ );
16
+ --x-size-border-radius-bottom-right-button-default: var(
17
+ --x-size-border-radius-bottom-right-button-card
18
+ );
19
+ --x-size-border-radius-bottom-left-button-default: var(
20
+ --x-size-border-radius-bottom-left-button-card
21
+ );
22
+ }
23
+ :root {
24
+ --x-color-background-button-default: var(--x-color-base-lead);
25
+ --x-color-border-button-default: var(--x-color-background-button-default);
26
+ --x-color-text-button-default: var(--x-color-base-neutral-100);
27
+ --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
28
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
29
+ --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
30
+ --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
31
+ --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
32
+ --x-size-border-width-button-default: var(--x-size-border-width-base);
33
+ --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
34
+ --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
35
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
36
+ --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
37
+ --x-size-height-button-default: var(--x-size-base-08);
38
+ --x-size-padding-right-button-default: var(--x-size-base-05);
39
+ --x-size-padding-left-button-default: var(--x-size-base-05);
40
+ --x-size-gap-button-default: var(--x-size-base-03);
41
+ --x-font-family-button-default: var(--x-font-family-text);
42
+ --x-size-font-button-default: var(--x-size-font-text);
43
+ --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
44
+ --x-size-line-height-button-default: var(--x-size-line-height-text);
45
+ }
46
+
47
+ [dir="ltr"] .x-button {
48
+ padding-right: var(--x-size-padding-right-button-default);
49
+ }
50
+
51
+ [dir="rtl"] .x-button {
52
+ padding-left: var(--x-size-padding-right-button-default);
53
+ }
54
+
55
+ [dir="ltr"] .x-button {
56
+ padding-left: var(--x-size-padding-left-button-default);
57
+ }
58
+
59
+ [dir="rtl"] .x-button {
60
+ padding-right: var(--x-size-padding-left-button-default);
61
+ }
62
+
63
+ [dir="ltr"] .x-button {
64
+ border-left-width: var(--x-size-border-width-left-button-default);
65
+ }
66
+
67
+ [dir="rtl"] .x-button {
68
+ border-right-width: var(--x-size-border-width-left-button-default);
69
+ }
70
+
71
+ [dir="ltr"] .x-button {
72
+ border-right-width: var(--x-size-border-width-right-button-default);
73
+ }
74
+
75
+ [dir="rtl"] .x-button {
76
+ border-left-width: var(--x-size-border-width-right-button-default);
77
+ }
78
+
79
+ .x-button {
80
+ display: inline-flex;
81
+ justify-content: center;
82
+ align-items: center;
83
+ box-sizing: border-box;
84
+ margin: 0;
85
+ gap: var(--x-size-gap-button-default);
86
+ min-height: var(--x-size-height-button-default);
87
+ background-color: var(--x-color-background-button-default);
88
+ border-color: var(--x-color-border-button-default);
89
+ color: var(--x-color-text-button-default);
90
+ border-style: solid;
91
+ border-top-width: var(--x-size-border-width-top-button-default);
92
+ border-bottom-width: var(--x-size-border-width-bottom-button-default);
93
+ border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
94
+ font-family: var(--x-font-family-button-default);
95
+ font-size: var(--x-size-font-button-default);
96
+ font-weight: var(--x-number-font-weight-button-default);
97
+ line-height: var(--x-size-line-height-button-default);
98
+ cursor: pointer;
99
+ }
100
+ @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
101
+ .x-button {
102
+ gap: 0;
103
+ }
104
+ .x-button > *:not(:last-child) {
105
+ margin-right: var(--x-size-gap-button-default);
106
+ }
107
+ }
108
+ :root {
109
+ --x-color-background-button-ghost: transparent;
110
+ --x-color-border-button-ghost: transparent;
111
+ --x-color-text-button-ghost: var(--x-color-base-lead);
112
+ }
113
+
114
+ .x-button--ghost.x-button,
115
+ .x-button--ghost .x-button {
116
+ --x-color-background-button-default: var(--x-color-background-button-ghost);
117
+ --x-color-border-button-default: var(--x-color-border-button-ghost);
118
+ --x-color-text-button-default: var(--x-color-text-button-ghost);
119
+ }
120
+
121
+ .x-button--ghost.x-button--ghost-start.x-button,
122
+ .x-button--ghost.x-button--ghost-start .x-button {
123
+ --x-size-padding-left-button-default: 0;
124
+ }
125
+
126
+ .x-button--ghost.x-button--ghost-end.x-button,
127
+ .x-button--ghost.x-button--ghost-end .x-button {
128
+ --x-size-padding-right-button-default: 0;
129
+ }
130
+ :root {
131
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
132
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
133
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
134
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
135
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
136
+ }
137
+
138
+ .x-button--pill.x-button,
139
+ .x-button--pill .x-button {
140
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
141
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
142
+ --x-size-border-radius-top-right-button-default: var(
143
+ --x-size-border-radius-top-right-button-pill
144
+ );
145
+ --x-size-border-radius-bottom-right-button-default: var(
146
+ --x-size-border-radius-bottom-right-button-pill
147
+ );
148
+ --x-size-border-radius-bottom-left-button-default: var(
149
+ --x-size-border-radius-bottom-left-button-pill
150
+ );
151
+ }
152
+ :root {
153
+ --x-color-background-button-primary: var(--x-color-background-button-default);
154
+ --x-color-border-button-primary: var(--x-color-border-button-default);
155
+ --x-color-text-button-primary: var(--x-color-text-button-default);
156
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
157
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
158
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
159
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
160
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
161
+ }
162
+
163
+ .x-button--primary.x-button,
164
+ .x-button--primary .x-button {
165
+ --x-color-background-button-default: var(--x-color-background-button-primary);
166
+ --x-color-border-button-default: var(--x-color-border-button-primary);
167
+ --x-color-text-button-default: var(--x-color-text-button-primary);
168
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
169
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
170
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
171
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
172
+ }
173
+ :root {
174
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
175
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
176
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
177
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
178
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
179
+ }
180
+
181
+ .x-button--round.x-button,
182
+ .x-button--round .x-button {
183
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
184
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
185
+ --x-size-border-radius-top-right-button-default: var(
186
+ --x-size-border-radius-top-right-button-round
187
+ );
188
+ --x-size-border-radius-bottom-right-button-default: var(
189
+ --x-size-border-radius-bottom-right-button-round
190
+ );
191
+ --x-size-border-radius-bottom-left-button-default: var(
192
+ --x-size-border-radius-bottom-left-button-round
193
+ );
194
+ min-width: var(--x-size-height-button-default);
195
+ --x-size-padding-left-button-default: 0;
196
+ --x-size-padding-right-button-default: 0;
197
+ }
198
+ :root {
199
+ --x-color-background-button-secondary: transparent;
200
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
201
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
202
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
203
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
204
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
205
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
206
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
207
+ }
208
+
209
+ .x-button--secondary.x-button,
210
+ .x-button--secondary .x-button {
211
+ --x-color-background-button-default: var(--x-color-background-button-secondary);
212
+ --x-color-border-button-default: var(--x-color-border-button-secondary);
213
+ --x-color-text-button-default: var(--x-color-text-button-secondary);
214
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
215
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
216
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
217
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
218
+ }
219
+ :root {
220
+ --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
221
+ --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
222
+ --x-color-text-button-tertiary: var(--x-color-text-default);
223
+ --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
224
+ --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
225
+ --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
226
+ --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
227
+ --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
228
+ }
229
+
230
+ .x-button--tertiary.x-button,
231
+ .x-button--tertiary .x-button {
232
+ --x-color-background-button-default: var(--x-color-background-button-tertiary);
233
+ --x-color-border-button-default: var(--x-color-border-button-tertiary);
234
+ --x-color-text-button-default: var(--x-color-text-button-tertiary);
235
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
236
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
237
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
238
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
239
+ }
package/design-system/full-theme.css CHANGED
@@ -100,229 +100,6 @@
100
100
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
101
101
  --x-size-font-badge-default: var(--x-size-font-base-xs);
102
102
  }
103
- .x-button--card.x-button,
104
- .x-button--card .x-button {
105
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
106
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
107
- --x-size-border-radius-top-right-button-default: var(
108
- --x-size-border-radius-top-right-button-card
109
- );
110
- --x-size-border-radius-bottom-right-button-default: var(
111
- --x-size-border-radius-bottom-right-button-card
112
- );
113
- --x-size-border-radius-bottom-left-button-default: var(
114
- --x-size-border-radius-bottom-left-button-card
115
- );
116
- }
117
- :root {
118
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
119
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
120
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
121
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
122
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
123
- }
124
- [dir="ltr"] .x-button {
125
- padding-right: var(--x-size-padding-right-button-default);
126
- }
127
- [dir="rtl"] .x-button {
128
- padding-left: var(--x-size-padding-right-button-default);
129
- }
130
- [dir="ltr"] .x-button {
131
- padding-left: var(--x-size-padding-left-button-default);
132
- }
133
- [dir="rtl"] .x-button {
134
- padding-right: var(--x-size-padding-left-button-default);
135
- }
136
- [dir="ltr"] .x-button {
137
- border-left-width: var(--x-size-border-width-left-button-default);
138
- }
139
- [dir="rtl"] .x-button {
140
- border-right-width: var(--x-size-border-width-left-button-default);
141
- }
142
- [dir="ltr"] .x-button {
143
- border-right-width: var(--x-size-border-width-right-button-default);
144
- }
145
- [dir="rtl"] .x-button {
146
- border-left-width: var(--x-size-border-width-right-button-default);
147
- }
148
- .x-button {
149
- display: inline-flex;
150
- justify-content: center;
151
- align-items: center;
152
- box-sizing: border-box;
153
- margin: 0;
154
- gap: var(--x-size-gap-button-default);
155
- min-height: var(--x-size-height-button-default);
156
- background-color: var(--x-color-background-button-default);
157
- border-color: var(--x-color-border-button-default);
158
- color: var(--x-color-text-button-default);
159
- border-style: solid;
160
- border-top-width: var(--x-size-border-width-top-button-default);
161
- border-bottom-width: var(--x-size-border-width-bottom-button-default);
162
- border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
163
- font-family: var(--x-font-family-button-default);
164
- font-size: var(--x-size-font-button-default);
165
- font-weight: var(--x-number-font-weight-button-default);
166
- line-height: var(--x-size-line-height-button-default);
167
- cursor: pointer;
168
- }
169
- @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
170
- .x-button {
171
- gap: 0;
172
- }
173
- .x-button > *:not(:last-child) {
174
- margin-right: var(--x-size-gap-button-default);
175
- }
176
- }
177
- :root {
178
- --x-color-background-button-default: var(--x-color-base-lead);
179
- --x-color-border-button-default: var(--x-color-background-button-default);
180
- --x-color-text-button-default: var(--x-color-base-neutral-100);
181
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
182
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
183
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
184
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
185
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
186
- --x-size-border-width-button-default: var(--x-size-border-width-base);
187
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
188
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
189
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
190
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
191
- --x-size-height-button-default: var(--x-size-base-08);
192
- --x-size-padding-right-button-default: var(--x-size-base-05);
193
- --x-size-padding-left-button-default: var(--x-size-base-05);
194
- --x-size-gap-button-default: var(--x-size-base-03);
195
- --x-font-family-button-default: var(--x-font-family-text);
196
- --x-size-font-button-default: var(--x-size-font-text);
197
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
198
- --x-size-line-height-button-default: var(--x-size-line-height-text);
199
- }
200
- .x-button--ghost.x-button,
201
- .x-button--ghost .x-button {
202
- --x-color-background-button-default: var(--x-color-background-button-ghost);
203
- --x-color-border-button-default: var(--x-color-border-button-ghost);
204
- --x-color-text-button-default: var(--x-color-text-button-ghost);
205
- }
206
-
207
- .x-button--ghost.x-button--ghost-start.x-button,
208
- .x-button--ghost.x-button--ghost-start .x-button {
209
- --x-size-padding-left-button-default: 0;
210
- }
211
-
212
- .x-button--ghost.x-button--ghost-end.x-button,
213
- .x-button--ghost.x-button--ghost-end .x-button {
214
- --x-size-padding-right-button-default: 0;
215
- }
216
- :root {
217
- --x-color-background-button-ghost: transparent;
218
- --x-color-border-button-ghost: transparent;
219
- --x-color-text-button-ghost: var(--x-color-base-lead);
220
- }
221
- .x-button--pill.x-button,
222
- .x-button--pill .x-button {
223
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
224
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
225
- --x-size-border-radius-top-right-button-default: var(
226
- --x-size-border-radius-top-right-button-pill
227
- );
228
- --x-size-border-radius-bottom-right-button-default: var(
229
- --x-size-border-radius-bottom-right-button-pill
230
- );
231
- --x-size-border-radius-bottom-left-button-default: var(
232
- --x-size-border-radius-bottom-left-button-pill
233
- );
234
- }
235
- :root {
236
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
237
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
238
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
239
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
240
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
241
- }
242
- .x-button--primary.x-button,
243
- .x-button--primary .x-button {
244
- --x-color-background-button-default: var(--x-color-background-button-primary);
245
- --x-color-border-button-default: var(--x-color-border-button-primary);
246
- --x-color-text-button-default: var(--x-color-text-button-primary);
247
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
248
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
249
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
250
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
251
- }
252
- :root {
253
- --x-color-background-button-primary: var(--x-color-background-button-default);
254
- --x-color-border-button-primary: var(--x-color-border-button-default);
255
- --x-color-text-button-primary: var(--x-color-text-button-default);
256
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
257
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
258
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
259
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
260
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
261
- }
262
- .x-button--round.x-button,
263
- .x-button--round .x-button {
264
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
265
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
266
- --x-size-border-radius-top-right-button-default: var(
267
- --x-size-border-radius-top-right-button-round
268
- );
269
- --x-size-border-radius-bottom-right-button-default: var(
270
- --x-size-border-radius-bottom-right-button-round
271
- );
272
- --x-size-border-radius-bottom-left-button-default: var(
273
- --x-size-border-radius-bottom-left-button-round
274
- );
275
- min-width: var(--x-size-height-button-default);
276
- --x-size-padding-left-button-default: 0;
277
- --x-size-padding-right-button-default: 0;
278
- }
279
- :root {
280
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
281
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
282
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
283
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
284
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
285
- }
286
- .x-button--secondary.x-button,
287
- .x-button--secondary .x-button {
288
- --x-color-background-button-default: var(--x-color-background-button-secondary);
289
- --x-color-border-button-default: var(--x-color-border-button-secondary);
290
- --x-color-text-button-default: var(--x-color-text-button-secondary);
291
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
292
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
293
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
294
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
295
- }
296
- :root {
297
- --x-color-background-button-secondary: transparent;
298
- --x-color-border-button-secondary: var(--x-color-border-button-default);
299
- --x-color-text-button-secondary: var(--x-color-border-button-default);
300
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
301
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
302
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
303
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
304
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
305
- }
306
- .x-button--tertiary.x-button,
307
- .x-button--tertiary .x-button {
308
- --x-color-background-button-default: var(--x-color-background-button-tertiary);
309
- --x-color-border-button-default: var(--x-color-border-button-tertiary);
310
- --x-color-text-button-default: var(--x-color-text-button-tertiary);
311
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
312
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
313
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
314
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
315
- }
316
- :root {
317
- --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
318
- --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
319
- --x-color-text-button-tertiary: var(--x-color-text-default);
320
- --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
321
- --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
322
- --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
323
- --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
324
- --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
325
- }
326
103
  .x-dropdown--card {
327
104
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
328
105
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
@@ -3093,21 +2870,6 @@
3093
2870
  --x-number-zoom-scale-picture: 1.1;
3094
2871
  --x-number-zoom-duration-picture: 0.3s;
3095
2872
  }
3096
- .x-progress-bar {
3097
- display: inline-block;
3098
- overflow: hidden;
3099
- background-color: var(--x-color-background-progress-bar-default);
3100
- border-color: var(--x-color-border-progress-bar-default);
3101
- border-style: solid;
3102
- border-width: var(--x-size-border-width-progress-bar-default);
3103
- border-radius: var(--x-size-border-radius-progress-bar-default);
3104
- }
3105
- .x-progress-bar__line {
3106
- height: var(--x-size-height-progress-bar-line-default);
3107
- width: var(--x-size-width-progress-bar-line-default);
3108
- border-radius: var(--x-size-border-radius-progress-bar-default);
3109
- background-color: var(--x-color-background-progress-bar-line-default);
3110
- }
3111
2873
  :root {
3112
2874
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
3113
2875
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -7515,3 +7277,19 @@
7515
7277
  .x-normal-case {
7516
7278
  text-transform: none;
7517
7279
  }
7280
+
7281
+ .x-progress-bar {
7282
+ display: inline-block;
7283
+ overflow: hidden;
7284
+ background-color: var(--x-color-background-progress-bar-default);
7285
+ border-color: var(--x-color-border-progress-bar-default);
7286
+ border-style: solid;
7287
+ border-width: var(--x-size-border-width-progress-bar-default);
7288
+ border-radius: var(--x-size-border-radius-progress-bar-default);
7289
+ }
7290
+ .x-progress-bar__line {
7291
+ height: var(--x-size-height-progress-bar-line-default);
7292
+ width: var(--x-size-width-progress-bar-line-default);
7293
+ border-radius: var(--x-size-border-radius-progress-bar-default);
7294
+ background-color: var(--x-color-background-progress-bar-line-default);
7295
+ }
package/docs/API-reference/api/x-adapter-platform.platformbanner.md CHANGED
@@ -19,7 +19,7 @@ export interface PlatformBanner
19
19
  | [id](./x-adapter-platform.platformbanner.id.md) | string | |
20
20
  | [image\_url](./x-adapter-platform.platformbanner.image_url.md) | string | |
21
21
  | [position?](./x-adapter-platform.platformbanner.position.md) | number | <i>(Optional)</i> |
22
- | [tagging?](./x-adapter-platform.platformbanner.tagging.md) | { query: string; } | <i>(Optional)</i> |
22
+ | [tagging?](./x-adapter-platform.platformbanner.tagging.md) | { query?: string; click?: string; } | <i>(Optional)</i> |
23
23
  | [title](./x-adapter-platform.platformbanner.title.md) | string | |
24
24
  | [url](./x-adapter-platform.platformbanner.url.md) | string | |
25
25
 
package/docs/API-reference/api/x-adapter-platform.platformbanner.tagging.md CHANGED
@@ -8,6 +8,7 @@
8
8
 
9
9
  ```typescript
10
10
  tagging?: {
11
- query: string;
11
+ query?: string;
12
+ click?: string;
12
13
  };
13
14
  ```