@semcore/data-table 4.50.2 → 4.51.0-prerelease.1

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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/Body.js +3 -3
  3. package/lib/cjs/DataTable.js +36 -36
  4. package/lib/cjs/style/data-table.shadow.css +37 -37
  5. package/lib/es6/Body.js +3 -3
  6. package/lib/es6/DataTable.js +36 -36
  7. package/lib/es6/style/data-table.shadow.css +37 -37
  8. package/lib/esm/Body.mjs +4 -4
  9. package/lib/esm/DataTable.mjs +37 -37
  10. package/lib/esm/style/data-table.shadow.css +37 -37
  11. package/package.json +6 -6
package/lib/esm/style/data-table.shadow.css CHANGED
@@ -39,13 +39,13 @@ SColumn {
39
39
  flex-grow: 1;
40
40
  font-size: var(--intergalactic-fs-100, 12px);
41
41
  line-height: var(--intergalactic-lh-100, 133%);
42
- color: var(--intergalactic-text-primary, #191b23);
42
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
43
43
  box-sizing: border-box;
44
44
  position: relative;
45
45
 
46
46
  &:focus-visible {
47
47
  outline: none;
48
- box-shadow: inset var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
48
+ box-shadow: inset var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
49
49
  }
50
50
 
51
51
  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, min-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, max-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
@@ -65,14 +65,14 @@ SColumn[hidden] {
65
65
 
66
66
  SColumn[use='primary'] {
67
67
  padding: var(--intergalactic-spacing-3x, 12px);
68
- border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
69
- background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
68
+ border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
69
+ background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.001 180));
70
70
  }
71
71
 
72
72
  SColumn[use='secondary'] {
73
73
  padding: var(--intergalactic-spacing-2x, 8px);
74
- border-bottom: 1px solid var(--intergalactic-border-table-accent, #a9abb6);
75
- background-color: var(--intergalactic-table-th-secondary-cell, #ffffff);
74
+ border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161));
75
+ background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0));
76
76
  }
77
77
 
78
78
  SColumn[group][use] {
@@ -95,7 +95,7 @@ SColumn[sortable] {
95
95
  cursor: pointer;
96
96
 
97
97
  &[use='primary']:hover, &[use='primary']:focus {
98
- background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
98
+ background-color: var(--intergalactic-table-th-primary-cell-hover, oklch(0.94 0.002 180));
99
99
  }
100
100
 
101
101
  &[justifyContent='right']:hover SSortWrapper, &[justifyContent='right']:focus SSortWrapper {
@@ -126,7 +126,7 @@ SColumn[sortable] {
126
126
  }
127
127
 
128
128
  SColumn[use='primary'][active] {
129
- background-color: var(--intergalactic-table-th-primary-cell-active, #e0e1e9);
129
+ background-color: var(--intergalactic-table-th-primary-cell-active, oklch(0.94 0.002 180));
130
130
  width: 100%;
131
131
  }
132
132
 
@@ -139,7 +139,7 @@ SColumn[resizable] {
139
139
  border-right: 1px solid transparent;
140
140
 
141
141
  &:hover:after {
142
- border-right-color: var(--intergalactic-border-table-accent, #a9abb6);
142
+ border-right-color: var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161));
143
143
  }
144
144
 
145
145
  &:after {
@@ -163,12 +163,12 @@ SColumn[fixed] {
163
163
 
164
164
  SColumn[borderLeft],
165
165
  SCell[borderLeft] {
166
- border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
166
+ border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
167
167
  }
168
168
 
169
169
  SColumn[borderRight],
170
170
  SCell[borderRight] {
171
- border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
171
+ border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
172
172
  }
173
173
 
174
174
  SSortWrapper {
@@ -194,7 +194,7 @@ SSortWrapper:before {
194
194
 
195
195
  SSortIcon {
196
196
  display: none;
197
- fill: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
197
+ fill: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433));
198
198
  position: absolute;
199
199
  top: calc(1em * 1.25 - 16px);
200
200
  right: 0;
@@ -206,7 +206,7 @@ SSortIcon {
206
206
  SColumn[use='primary'] SSortWrapper:before {
207
207
  background: linear-gradient(
208
208
  270deg,
209
- var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
209
+ var(--intergalactic-table-th-primary-cell-hover, oklch(0.94 0.002 180)) 67.5%,
210
210
  rgba(224, 225, 233, 0) 105%
211
211
  );
212
212
  }
@@ -214,7 +214,7 @@ SColumn[use='primary'] SSortWrapper:before {
214
214
  SColumn[use='secondary'] SSortWrapper:before {
215
215
  background: linear-gradient(
216
216
  270deg,
217
- var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
217
+ var(--intergalactic-table-th-secondary-cell, oklch(1 0 0)) 67.5%,
218
218
  rgba(255, 255, 255, 0) 105%
219
219
  );
220
220
  }
@@ -252,7 +252,7 @@ SRow SCell:hover + SGroupCell SCell:not([theme]) {
252
252
 
253
253
  /* MUTED THEME */
254
254
  SRow[theme='muted'] SCell:not([theme]) {
255
- background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
255
+ background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.001 180));
256
256
  }
257
257
 
258
258
  SRow[theme='muted'][active] > SCell:not([theme]) {
@@ -271,62 +271,62 @@ SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
271
271
 
272
272
  /* INFO THEME */
273
273
  SRow[theme='info'] SCell:not([theme]) {
274
- background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
274
+ background-color: var(--intergalactic-table-td-cell-selected, oklch(0.98 0.008 278.4));
275
275
  }
276
276
 
277
277
  SRow[theme='info'][active] > SCell:not([theme]) {
278
- background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
278
+ background-color: var(--intergalactic-table-td-cell-selected-active, oklch(0.94 0.023 278.4));
279
279
  }
280
280
 
281
281
  SRow:hover > SCell[theme='info'],
282
282
  SRow[theme='info']:hover > SCell:not([theme]),
283
283
  SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
284
- background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
284
+ background-color: var(--intergalactic-table-td-cell-selected-hover, oklch(0.96 0.015 278.4));
285
285
  }
286
286
 
287
287
  /* SUCCESS THEME */
288
288
  SRow[theme='success'] SCell:not([theme]) {
289
- background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
289
+ background-color: var(--intergalactic-table-td-cell-new, oklch(0.977 0.036 184));
290
290
  }
291
291
 
292
292
  SRow[theme='success'][active] > SCell:not([theme]) {
293
- background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
293
+ background-color: var(--intergalactic-table-td-cell-new-active, oklch(0.94 0.074 178.1));
294
294
  }
295
295
 
296
296
  SRow:hover > SCell[theme='success'],
297
297
  SRow[theme='success']:hover > SCell:not([theme]),
298
298
  SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
299
- background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
299
+ background-color: var(--intergalactic-table-td-cell-new-hover, oklch(0.96 0.057 179.7));
300
300
  }
301
301
 
302
302
  /* WARNING THEME */
303
303
  SRow[theme='warning'] SCell:not([theme]) {
304
- background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
304
+ background-color: var(--intergalactic-table-td-cell-warning, oklch(0.979 0.03 88.1));
305
305
  }
306
306
 
307
307
  SRow[theme='warning'][active] > SCell:not([theme]) {
308
- background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
308
+ background-color: var(--intergalactic-table-td-cell-warning-active, oklch(0.939 0.069 79.8));
309
309
  }
310
310
 
311
311
  SRow:hover > SCell[theme='warning'],
312
312
  SRow[theme='warning']:hover > SCell:not([theme]),
313
313
  SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
314
- background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
314
+ background-color: var(--intergalactic-table-td-cell-warning-hover, oklch(0.96 0.05 83.1));
315
315
  }
316
316
 
317
317
  /* DANGER THEME */
318
318
  SRow[theme='danger'] SCell:not([theme]) {
319
- background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
319
+ background-color: var(--intergalactic-table-td-cell-critical, oklch(0.977 0.016 1.8));
320
320
  }
321
321
 
322
322
  SRow[theme='danger'][active] > SCell:not([theme]) {
323
- background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
323
+ background-color: var(--intergalactic-table-td-cell-critical-active, oklch(0.938 0.042 8.4));
324
324
  }
325
325
 
326
326
  SRow:hover > SCell[theme='danger'],
327
327
  SRow[theme='danger']:hover > SCell:not([theme]),
328
328
  SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
329
- background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
329
+ background-color: var(--intergalactic-table-td-cell-critical-hover, oklch(0.958 0.029 5.7));
330
330
  }
331
331
 
332
332
  SRow[positioned] {
@@ -343,9 +343,9 @@ SCell {
343
343
  flex-basis: auto;
344
344
  font-size: var(--intergalactic-fs-200, 14px);
345
345
  line-height: var(--intergalactic-lh-200, 142%);
346
- color: var(--intergalactic-text-primary, #191b23);
346
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
347
347
  box-sizing: border-box;
348
- border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
348
+ border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
349
349
  overflow: hidden;
350
350
  white-space: nowrap;
351
351
  font-variant-numeric: tabular-nums;
@@ -356,13 +356,13 @@ SCell {
356
356
  SCell[use='primary'] {
357
357
  padding: var(--intergalactic-spacing-3x, 12px);
358
358
  min-height: 45px;
359
- background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
359
+ background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
360
360
  }
361
361
 
362
362
  SCell[use='secondary'] {
363
363
  padding: var(--intergalactic-spacing-2x, 8px);
364
364
  min-height: 37px;
365
- background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
365
+ background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
366
366
  }
367
367
 
368
368
  SCell[fixed] {
@@ -371,23 +371,23 @@ SCell[fixed] {
371
371
  }
372
372
 
373
373
  SCell[theme='muted'] {
374
- background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
374
+ background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.001 180));
375
375
  }
376
376
 
377
377
  SCell[theme='info'] {
378
- background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
378
+ background-color: var(--intergalactic-table-td-cell-selected, oklch(0.98 0.008 278.4));
379
379
  }
380
380
 
381
381
  SCell[theme='success'] {
382
- background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
382
+ background-color: var(--intergalactic-table-td-cell-new, oklch(0.977 0.036 184));
383
383
  }
384
384
 
385
385
  SCell[theme='warning'] {
386
- background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
386
+ background-color: var(--intergalactic-table-td-cell-warning, oklch(0.979 0.03 88.1));
387
387
  }
388
388
 
389
389
  SCell[theme='danger'] {
390
- background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
390
+ background-color: var(--intergalactic-table-td-cell-critical, oklch(0.977 0.016 1.8));
391
391
  }
392
392
 
393
393
  SCell:focus-visible:not([fixed]) {
@@ -399,7 +399,7 @@ SCell:focus-visible::after {
399
399
  display: block;
400
400
  content: '';
401
401
  inset: 3px;
402
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
402
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
403
403
  pointer-events: none;
404
404
  }
405
405
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/data-table",
3
3
  "description": "Semrush DataTable Component",
4
- "version": "4.50.2",
4
+ "version": "4.51.0-prerelease.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/flex-box": "5.41.4",
18
- "@semcore/icon": "4.62.1",
19
- "@semcore/scroll-area": "5.45.4",
20
- "@semcore/utils": "4.48.5"
17
+ "@semcore/flex-box": "5.42.0-prerelease.1",
18
+ "@semcore/icon": "4.63.0-prerelease.1",
19
+ "@semcore/scroll-area": "5.46.0-prerelease.1",
20
+ "@semcore/utils": "4.49.0-prerelease.1"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@types/react": "18.0.21",
@@ -37,7 +37,7 @@
37
37
  "csstype": "3.0.8"
38
38
  },
39
39
  "peerDependencies": {
40
- "@semcore/core": "^2.17.5",
40
+ "@semcore/core": "^2.40.0-prerelease.1",
41
41
  "react": "16.8 - 18",
42
42
  "react-dom": "16.8 - 18"
43
43
  },