@x-plat/design-system 0.6.0 → 0.7.0

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 (74) hide show
  1. package/dist/components/Accordion/index.css +10 -3
  2. package/dist/components/Alert/index.css +7 -0
  3. package/dist/components/AutoResizeTextArea/index.css +3 -0
  4. package/dist/components/Avatar/index.css +13 -1
  5. package/dist/components/Badge/index.css +13 -2
  6. package/dist/components/Box/index.css +8 -5
  7. package/dist/components/Breadcrumb/index.css +5 -1
  8. package/dist/components/Button/index.css +10 -1
  9. package/dist/components/Calendar/index.cjs +1 -1
  10. package/dist/components/Calendar/index.css +10 -6
  11. package/dist/components/Calendar/index.js +1 -1
  12. package/dist/components/CardTab/index.css +14 -2
  13. package/dist/components/Chart/index.css +32 -11
  14. package/dist/components/ChatInput/index.css +6 -0
  15. package/dist/components/CheckBox/index.css +10 -1
  16. package/dist/components/Chip/index.css +12 -0
  17. package/dist/components/DatePicker/index.css +51 -12
  18. package/dist/components/Drawer/index.css +14 -7
  19. package/dist/components/Dropdown/index.css +5 -1
  20. package/dist/components/Editor/index.css +49 -10
  21. package/dist/components/EmptyState/index.css +9 -2
  22. package/dist/components/FileUpload/index.css +9 -2
  23. package/dist/components/HtmlTypeWriter/index.cjs +2 -0
  24. package/dist/components/HtmlTypeWriter/index.css +13 -1
  25. package/dist/components/HtmlTypeWriter/index.d.cts +3 -3
  26. package/dist/components/HtmlTypeWriter/index.d.ts +3 -3
  27. package/dist/components/HtmlTypeWriter/index.js +1 -0
  28. package/dist/components/ImageSelector/index.css +8 -0
  29. package/dist/components/Input/index.css +12 -0
  30. package/dist/components/Modal/index.css +1 -1
  31. package/dist/components/Pagination/index.css +25 -1
  32. package/dist/components/PopOver/index.css +1 -1
  33. package/dist/components/Progress/index.css +5 -2
  34. package/dist/components/Radio/index.css +9 -0
  35. package/dist/components/Select/index.css +20 -3
  36. package/dist/components/Skeleton/index.cjs +6 -6
  37. package/dist/components/Skeleton/index.js +6 -6
  38. package/dist/components/Steps/index.css +14 -4
  39. package/dist/components/Switch/index.css +1 -1
  40. package/dist/components/Tab/index.css +16 -1
  41. package/dist/components/Table/index.cjs +4 -1
  42. package/dist/components/Table/index.css +12 -0
  43. package/dist/components/Table/index.d.cts +2 -0
  44. package/dist/components/Table/index.d.ts +2 -0
  45. package/dist/components/Table/index.js +4 -1
  46. package/dist/components/Tag/index.css +12 -0
  47. package/dist/components/TextArea/index.css +9 -0
  48. package/dist/components/Toast/index.css +8 -1
  49. package/dist/components/Tooltip/index.css +8 -4
  50. package/dist/components/Video/index.css +31 -20
  51. package/dist/components/index.cjs +253 -248
  52. package/dist/components/index.css +532 -147
  53. package/dist/components/index.d.cts +3 -3
  54. package/dist/components/index.d.ts +3 -3
  55. package/dist/components/index.js +226 -222
  56. package/dist/index.cjs +253 -248
  57. package/dist/index.css +535 -150
  58. package/dist/index.d.cts +3 -3
  59. package/dist/index.d.ts +3 -3
  60. package/dist/index.js +226 -222
  61. package/dist/layout/Header/index.css +2 -2
  62. package/dist/layout/Layout/index.css +1 -1
  63. package/dist/layout/index.css +43 -3
  64. package/guidelines/components/accordion.md +1 -1
  65. package/guidelines/components/avatar.md +1 -1
  66. package/guidelines/components/card.md +1 -1
  67. package/guidelines/components/chart.md +1 -1
  68. package/guidelines/components/data-display.md +4 -4
  69. package/guidelines/components/dropdown.md +1 -1
  70. package/guidelines/components/file-media.md +3 -3
  71. package/guidelines/components/html-typewriter.md +1 -1
  72. package/guidelines/components/navigation.md +144 -20
  73. package/guidelines/components/swiper.md +2 -2
  74. package/package.json +1 -1
package/dist/components/Video/index.css CHANGED
@@ -40,7 +40,7 @@
40
40
  content: "";
41
41
  position: absolute;
42
42
  inset: 0;
43
- background-color: rgba(0, 0, 0, 0.2);
43
+ background-color: var(--semantic-interaction-overlay-25);
44
44
  opacity: 0;
45
45
  transition: opacity 0.2s ease;
46
46
  }
@@ -49,7 +49,7 @@
49
49
  z-index: 1;
50
50
  display: flex;
51
51
  font-size: var(--semantic-typo-display-1-b-size);
52
- filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
52
+ filter: drop-shadow(0 2px 8px var(--semantic-interaction-overlay-50));
53
53
  }
54
54
  .lib-xplat-video > .center-play.is-playing {
55
55
  opacity: 0;
@@ -69,8 +69,8 @@
69
69
  background:
70
70
  linear-gradient(
71
71
  to top,
72
- rgba(0, 0, 0, 0.7),
73
- rgba(0, 0, 0, 0));
72
+ var(--semantic-interaction-overlay-75),
73
+ transparent);
74
74
  color: var(--semantic-icon-inverse);
75
75
  opacity: 0;
76
76
  transition: opacity 0.2s ease;
@@ -101,7 +101,7 @@
101
101
  transition: background-color 0.15s ease;
102
102
  }
103
103
  .lib-xplat-video .control-btn:hover {
104
- background-color: rgba(255, 255, 255, 0.15);
104
+ background-color: color-mix(in srgb, var(--semantic-icon-inverse) 15%, transparent);
105
105
  }
106
106
  .lib-xplat-video .control-btn:focus-visible {
107
107
  outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -111,7 +111,7 @@
111
111
  margin-left: auto;
112
112
  }
113
113
  .lib-xplat-video .control-btn.is-active {
114
- background-color: rgba(255, 255, 255, 0.25);
114
+ background-color: color-mix(in srgb, var(--semantic-icon-inverse) 25%, transparent);
115
115
  }
116
116
  .lib-xplat-video .rate-group {
117
117
  position: relative;
@@ -119,8 +119,11 @@
119
119
  .lib-xplat-video .rate-group .rate-btn {
120
120
  width: auto;
121
121
  padding: 0 var(--spacing-space-2);
122
- font-size: var(--semantic-typo-caption-2-r-size);
123
- font-weight: 600;
122
+ font-family: var(--semantic-typo-caption-2-sb-font);
123
+ font-size: var(--semantic-typo-caption-2-sb-size);
124
+ line-height: var(--semantic-typo-caption-2-sb-lh);
125
+ font-weight: var(--semantic-typo-caption-2-sb-weight);
126
+ letter-spacing: var(--semantic-typo-caption-2-sb-ls);
124
127
  font-variant-numeric: tabular-nums;
125
128
  }
126
129
  .lib-xplat-video .rate-group .rate-menu {
@@ -130,7 +133,7 @@
130
133
  margin: 0;
131
134
  padding: var(--spacing-space-1);
132
135
  list-style: none;
133
- background-color: rgba(0, 0, 0, 0.85);
136
+ background-color: var(--semantic-interaction-overlay-85);
134
137
  border-radius: var(--spacing-radius-sm);
135
138
  min-width: 64px;
136
139
  }
@@ -142,19 +145,27 @@
142
145
  color: inherit;
143
146
  text-align: left;
144
147
  cursor: pointer;
145
- border-radius: var(--spacing-radius-xs);
148
+ border-radius: var(--spacing-radius-sm);
149
+ font-family: var(--semantic-typo-caption-2-r-font);
146
150
  font-size: var(--semantic-typo-caption-2-r-size);
151
+ line-height: var(--semantic-typo-caption-2-r-lh);
152
+ font-weight: var(--semantic-typo-caption-2-r-weight);
153
+ letter-spacing: var(--semantic-typo-caption-2-r-ls);
147
154
  font-variant-numeric: tabular-nums;
148
155
  }
149
156
  .lib-xplat-video .rate-group .rate-menu .rate-item:hover {
150
- background-color: rgba(255, 255, 255, 0.15);
157
+ background-color: color-mix(in srgb, var(--semantic-icon-inverse) 15%, transparent);
151
158
  }
152
159
  .lib-xplat-video .rate-group .rate-menu .rate-item.is-active {
153
160
  color: var(--semantic-surface-brand-default);
154
- font-weight: 600;
161
+ font-weight: var(--semantic-typo-caption-2-sb-weight);
155
162
  }
156
163
  .lib-xplat-video .time {
164
+ font-family: var(--semantic-typo-caption-2-r-font);
157
165
  font-size: var(--semantic-typo-caption-2-r-size);
166
+ line-height: var(--semantic-typo-caption-2-r-lh);
167
+ font-weight: var(--semantic-typo-caption-2-r-weight);
168
+ letter-spacing: var(--semantic-typo-caption-2-r-ls);
158
169
  font-variant-numeric: tabular-nums;
159
170
  white-space: nowrap;
160
171
  }
@@ -220,15 +231,15 @@
220
231
  to right,
221
232
  var(--semantic-surface-brand-default) 0%,
222
233
  var(--semantic-surface-brand-default) var(--progress, 0%),
223
- rgba(255, 255, 255, 0.4) var(--progress, 0%),
224
- rgba(255, 255, 255, 0.4) var(--buffered, 0%),
225
- rgba(255, 255, 255, 0.2) var(--buffered, 0%),
226
- rgba(255, 255, 255, 0.2) 100%);
234
+ color-mix(in srgb, var(--semantic-icon-inverse) 40%, transparent) var(--progress, 0%),
235
+ color-mix(in srgb, var(--semantic-icon-inverse) 40%, transparent) var(--buffered, 0%),
236
+ color-mix(in srgb, var(--semantic-icon-inverse) 20%, transparent) var(--buffered, 0%),
237
+ color-mix(in srgb, var(--semantic-icon-inverse) 20%, transparent) 100%);
227
238
  }
228
239
  .lib-xplat-video .seekbar::-moz-range-track {
229
240
  height: 4px;
230
241
  border-radius: 2px;
231
- background: rgba(255, 255, 255, 0.2);
242
+ background: color-mix(in srgb, var(--semantic-icon-inverse) 20%, transparent);
232
243
  }
233
244
  .lib-xplat-video .seekbar::-moz-range-progress {
234
245
  height: 4px;
@@ -246,13 +257,13 @@
246
257
  to right,
247
258
  var(--semantic-icon-inverse) 0%,
248
259
  var(--semantic-icon-inverse) var(--volume, 0%),
249
- rgba(255, 255, 255, 0.3) var(--volume, 0%),
250
- rgba(255, 255, 255, 0.3) 100%);
260
+ color-mix(in srgb, var(--semantic-icon-inverse) 30%, transparent) var(--volume, 0%),
261
+ color-mix(in srgb, var(--semantic-icon-inverse) 30%, transparent) 100%);
251
262
  }
252
263
  .lib-xplat-video .volume-slider::-moz-range-track {
253
264
  height: 4px;
254
265
  border-radius: 2px;
255
- background: rgba(255, 255, 255, 0.3);
266
+ background: color-mix(in srgb, var(--semantic-icon-inverse) 30%, transparent);
256
267
  }
257
268
  .lib-xplat-video .volume-slider::-moz-range-progress {
258
269
  height: 4px;