@kupola/kupola 1.4.4 → 1.4.6

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 (17) hide show
  1. package/css/components-ext.css +8 -8
  2. package/css/table.css +34 -34
  3. package/css/theme-dark.css +12 -12
  4. package/css/theme-light.css +16 -16
  5. package/dist/css/components-ext.css +8 -8
  6. package/dist/css/table.css +34 -34
  7. package/dist/css/theme-dark.css +12 -12
  8. package/dist/css/theme-light.css +16 -16
  9. package/dist/kupola.cjs.js +1 -1
  10. package/dist/kupola.cjs.js.map +1 -1
  11. package/dist/kupola.esm.js +8 -5
  12. package/dist/kupola.esm.js.map +1 -1
  13. package/dist/kupola.umd.js +1 -1
  14. package/dist/kupola.umd.js.map +1 -1
  15. package/package.json +1 -1
  16. package/dist/kupola.css +0 -9137
  17. package/dist/kupola.min.css +0 -1
package/css/components-ext.css CHANGED
@@ -450,15 +450,15 @@
450
450
  }
451
451
 
452
452
  .ds-titlebar__traffic-btn--close {
453
- background-color: #FF5F57;
453
+ background-color: var(--status-error-default);
454
454
  }
455
455
 
456
456
  .ds-titlebar__traffic-btn--minimize {
457
- background-color: #FEBC2E;
457
+ background-color: var(--status-warning-default);
458
458
  }
459
459
 
460
460
  .ds-titlebar__traffic-btn--maximize {
461
- background-color: #28C840;
461
+ background-color: var(--status-success-default);
462
462
  }
463
463
 
464
464
  .ds-titlebar__project {
@@ -2210,7 +2210,7 @@
2210
2210
  width: 6px;
2211
2211
  height: 6px;
2212
2212
  border-radius: 50%;
2213
- background-color: #33b9c1;
2213
+ background-color: var(--status-info-default);
2214
2214
  }
2215
2215
 
2216
2216
  .ds-calendar__day.is-selected {
@@ -3920,15 +3920,15 @@
3920
3920
  }
3921
3921
 
3922
3922
  .ds-heatmap__cell--level-0 {
3923
- background-color: rgba(0, 0, 0, 0.1);
3923
+ background-color: var(--bg-overlay-l1);
3924
3924
  }
3925
3925
 
3926
3926
  .ds-heatmap__cell--level-1 {
3927
- background-color: rgba(34, 197, 94, 0.2);
3927
+ background-color: var(--status-success-surface-l2);
3928
3928
  }
3929
3929
 
3930
3930
  .ds-heatmap__cell--level-2 {
3931
- background-color: rgba(34, 197, 94, 0.4);
3931
+ background-color: var(--status-success-surface-l3);
3932
3932
  }
3933
3933
 
3934
3934
  .ds-heatmap__cell--level-3 {
@@ -3940,7 +3940,7 @@
3940
3940
  }
3941
3941
 
3942
3942
  .ds-heatmap__cell--level-5 {
3943
- background-color: #22c55e;
3943
+ background-color: var(--status-success-default);
3944
3944
  }
3945
3945
 
3946
3946
  .ds-heatmap__labels {
package/css/table.css CHANGED
@@ -5,58 +5,58 @@
5
5
  .kupola-table-wrapper { width: 100%; }
6
6
  .kupola-table-container { overflow-x: auto; }
7
7
  .kupola-table { width: 100%; border-collapse: collapse; font-size: 14px; }
8
- .kupola-table th, .kupola-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e8e8e8; }
9
- .kupola-table th { background: #fafafa; font-weight: 600; color: #333; white-space: nowrap; }
10
- .kupola-table-striped tbody tr:nth-child(even) { background: #fafafa; }
11
- .kupola-table-hover tbody tr:hover { background: #f0f7ff; }
12
- .kupola-table-bordered { border: 1px solid #e8e8e8; }
13
- .kupola-table-bordered th, .kupola-table-bordered td { border: 1px solid #e8e8e8; }
8
+ .kupola-table th, .kupola-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-neutral-l1); }
9
+ .kupola-table th { background: var(--bg-base-secondary); font-weight: 600; color: var(--text-default); white-space: nowrap; }
10
+ .kupola-table-striped tbody tr:nth-child(even) { background: var(--bg-base-secondary); }
11
+ .kupola-table-hover tbody tr:hover { background: var(--status-primary-surface-l2); }
12
+ .kupola-table-bordered { border: 1px solid var(--border-neutral-l1); }
13
+ .kupola-table-bordered th, .kupola-table-bordered td { border: 1px solid var(--border-neutral-l1); }
14
14
  .kupola-table-compact th, .kupola-table-compact td { padding: 8px 12px; }
15
15
  .kupola-table-sortable { cursor: pointer; user-select: none; position: relative; }
16
- .kupola-table-sortable:hover { background: #f0f0f0; }
16
+ .kupola-table-sortable:hover { background: var(--bg-base-tertiary); }
17
17
  .kupola-table-sort-icon { font-size: 12px; opacity: 0.5; margin-left: 4px; }
18
18
  .kupola-table-sort-asc .kupola-table-sort-icon,
19
- .kupola-table-sort-desc .kupola-table-sort-icon { opacity: 1; color: #1890ff; }
20
- .kupola-table-empty, .kupola-table-loading { text-align: center; padding: 40px 16px !important; color: #999; }
19
+ .kupola-table-sort-desc .kupola-table-sort-icon { opacity: 1; color: var(--status-primary-default); }
20
+ .kupola-table-empty, .kupola-table-loading { text-align: center; padding: 40px 16px !important; color: var(--text-tertiary); }
21
21
  .kupola-table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
22
22
  .kupola-table-toolbar-right { display: flex; align-items: center; gap: 8px; }
23
- .kupola-table-filter-input { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; width: 240px; }
24
- .kupola-table-filter-input:focus { outline: none; border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.1); }
25
- .kupola-table-info { color: #999; font-size: 13px; }
26
- .kupola-table-selection-info { color: #1890ff; font-size: 13px; font-weight: 500; }
23
+ .kupola-table-filter-input { padding: 6px 12px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; font-size: 14px; width: 240px; }
24
+ .kupola-table-filter-input:focus { outline: none; border-color: var(--status-primary-default); box-shadow: 0 0 0 2px var(--status-primary-surface-l2); }
25
+ .kupola-table-info { color: var(--text-tertiary); font-size: 13px; }
26
+ .kupola-table-selection-info { color: var(--status-primary-default); font-size: 13px; font-weight: 500; }
27
27
  .kupola-table-col-selection { width: 40px; text-align: center; }
28
28
  .kupola-table-col-expand { width: 40px; text-align: center; }
29
- .kupola-table-expand-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; color: #666; }
30
- .kupola-table-expand-btn:hover { color: #1890ff; }
31
- .kupola-table-expand-row td { background: #fafafa; padding: 16px; }
32
- .kupola-table-row-selected { background: #e6f7ff !important; }
33
- .kupola-table-row-selected:hover { background: #bae7ff !important; }
29
+ .kupola-table-expand-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; color: var(--text-secondary); }
30
+ .kupola-table-expand-btn:hover { color: var(--status-primary-default); }
31
+ .kupola-table-expand-row td { background: var(--bg-base-secondary); padding: 16px; }
32
+ .kupola-table-row-selected { background: var(--status-primary-surface-l1) !important; }
33
+ .kupola-table-row-selected:hover { background: var(--status-primary-surface-l2) !important; }
34
34
 
35
35
  /* Resize */
36
36
  .kupola-table-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; background: transparent; }
37
- .kupola-table-resize-handle:hover { background: #1890ff; opacity: 0.3; }
37
+ .kupola-table-resize-handle:hover { background: var(--status-primary-default); opacity: 0.3; }
38
38
 
39
39
  /* Drag */
40
40
  .kupola-table-draggable { transition: opacity 0.2s; }
41
41
  .kupola-table-dragging { opacity: 0.4; }
42
- .kupola-table-drag-over { border-top: 2px solid #1890ff !important; }
42
+ .kupola-table-drag-over { border-top: 2px solid var(--status-primary-default) !important; }
43
43
 
44
44
  /* Edit */
45
45
  .kupola-table-editable-cell { cursor: text; }
46
- .kupola-table-editable-cell:hover { background: #e6f7ff; }
46
+ .kupola-table-editable-cell:hover { background: var(--status-primary-surface-l1); }
47
47
  .kupola-table-edit-cell { display: flex; gap: 4px; align-items: center; }
48
48
  .kupola-table-edit-input { flex: 1; padding: 2px 6px; font-size: 13px; }
49
49
  .kupola-table-edit-actions { display: flex; gap: 2px; }
50
- .kupola-table-edit-save, .kupola-table-edit-cancel { background: none; border: 1px solid #d9d9d9; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 12px; }
51
- .kupola-table-edit-save { color: #52c41a; border-color: #52c41a; }
52
- .kupola-table-edit-cancel { color: #ff4d4f; border-color: #ff4d4f; }
53
- .kupola-table-edit-save:hover { background: #f6ffed; }
54
- .kupola-table-edit-cancel:hover { background: #fff2f0; }
50
+ .kupola-table-edit-save, .kupola-table-edit-cancel { background: none; border: 1px solid var(--border-neutral-l2); border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 12px; }
51
+ .kupola-table-edit-save { color: var(--status-success-default); border-color: var(--status-success-default); }
52
+ .kupola-table-edit-cancel { color: var(--status-error-default); border-color: var(--status-error-default); }
53
+ .kupola-table-edit-save:hover { background: var(--status-success-surface-l1); }
54
+ .kupola-table-edit-cancel:hover { background: var(--status-error-surface-l1); }
55
55
 
56
56
  /* Tree */
57
57
  .kupola-table-tree-indent { display: inline-block; }
58
- .kupola-table-tree-toggle { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 4px; color: #666; }
59
- .kupola-table-tree-toggle:hover { color: #1890ff; }
58
+ .kupola-table-tree-toggle { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 4px; color: var(--text-secondary); }
59
+ .kupola-table-tree-toggle:hover { color: var(--status-primary-default); }
60
60
  .kupola-table-tree-toggle-placeholder { display: inline-block; width: 18px; }
61
61
 
62
62
  /* Virtual */
@@ -65,10 +65,10 @@
65
65
  /* Pagination */
66
66
  .kupola-table-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 0; }
67
67
  .kupola-table-pages { display: flex; gap: 4px; align-items: center; }
68
- .kupola-table-page-btn { min-width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
69
- .kupola-table-page-btn:hover:not(:disabled):not(.active) { border-color: #1890ff; color: #1890ff; }
70
- .kupola-table-page-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }
68
+ .kupola-table-page-btn { min-width: 32px; height: 32px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; background: var(--bg-base-default); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
69
+ .kupola-table-page-btn:hover:not(:disabled):not(.active) { border-color: var(--status-primary-default); color: var(--status-primary-default); }
70
+ .kupola-table-page-btn.active { background: var(--status-primary-default); color: var(--text-onbrand); border-color: var(--status-primary-default); }
71
71
  .kupola-table-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
72
- .kupola-table-page-ellipsis { padding: 0 4px; color: #999; }
73
- .kupola-table-page-size { padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
74
- .kupola-table-page-info { color: #999; font-size: 13px; }
72
+ .kupola-table-page-ellipsis { padding: 0 4px; color: var(--text-tertiary); }
73
+ .kupola-table-page-size { padding: 4px 8px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; font-size: 13px; }
74
+ .kupola-table-page-info { color: var(--text-tertiary); font-size: 13px; }
package/css/theme-dark.css CHANGED
@@ -15,25 +15,25 @@
15
15
  --bg-invert-active: #E5E5E5;
16
16
  --bg-invert-disabled: rgba(255, 255, 255, 0.2);
17
17
 
18
- --text-default: #D1D3DB;
18
+ --text-default: #E5E7EB;
19
19
  --text-default-hover: #FFFFFF;
20
20
  --text-default-active: #FFFFFF;
21
- --text-secondary: #A0A5B2;
22
- --text-secondary-hover: #D1D3DB;
23
- --text-secondary-active: #D1D3DB;
24
- --text-tertiary: #7D8493;
25
- --text-disabled: #7D8493;
21
+ --text-secondary: #B8BDCA;
22
+ --text-secondary-hover: #E5E7EB;
23
+ --text-secondary-active: #E5E7EB;
24
+ --text-tertiary: #9CA3AF;
25
+ --text-disabled: #8B93A1;
26
26
  --text-onbrand: #FFFFFF;
27
27
  --text-onaccent: #FFFFFF;
28
28
 
29
- --icon-default: #D1D3DB;
29
+ --icon-default: #E5E7EB;
30
30
  --icon-default-hover: #FFFFFF;
31
31
  --icon-default-active: #FFFFFF;
32
- --icon-secondary: #9599A6;
33
- --icon-secondary-hover: #D1D3DB;
34
- --icon-secondary-active: #D1D3DB;
35
- --icon-tertiary: #7D8493;
36
- --icon-disabled: #7D8493;
32
+ --icon-secondary: #B8BDCA;
33
+ --icon-secondary-hover: #E5E7EB;
34
+ --icon-secondary-active: #E5E7EB;
35
+ --icon-tertiary: #9CA3AF;
36
+ --icon-disabled: #8B93A1;
37
37
  --icon-onbrand: #FFFFFF;
38
38
  --icon-onaccent: #FFFFFF;
39
39
 
package/css/theme-light.css CHANGED
@@ -15,25 +15,25 @@
15
15
  --bg-invert-active: #3A3E44;
16
16
  --bg-invert-disabled: rgba(0, 0, 0, 0.2);
17
17
 
18
- --text-default: #1A1B1D;
19
- --text-default-hover: #0C0C0D;
20
- --text-default-active: #0C0C0D;
21
- --text-secondary: #666B75;
22
- --text-secondary-hover: #3A3E44;
23
- --text-secondary-active: #3A3E44;
24
- --text-tertiary: #6B7280;
25
- --text-disabled: #6F7482;
18
+ --text-default: #0F1117;
19
+ --text-default-hover: #000000;
20
+ --text-default-active: #000000;
21
+ --text-secondary: #4B5563;
22
+ --text-secondary-hover: #374151;
23
+ --text-secondary-active: #374151;
24
+ --text-tertiary: #5B6370;
25
+ --text-disabled: #525A68;
26
26
  --text-onbrand: #FFFFFF;
27
27
  --text-onaccent: #FFFFFF;
28
28
 
29
- --icon-default: #1A1B1D;
30
- --icon-default-hover: #0C0C0D;
31
- --icon-default-active: #0C0C0D;
32
- --icon-secondary: #666B75;
33
- --icon-secondary-hover: #3A3E44;
34
- --icon-secondary-active: #3A3E44;
35
- --icon-tertiary: #6B7280;
36
- --icon-disabled: #6F7482;
29
+ --icon-default: #0F1117;
30
+ --icon-default-hover: #000000;
31
+ --icon-default-active: #000000;
32
+ --icon-secondary: #4B5563;
33
+ --icon-secondary-hover: #374151;
34
+ --icon-secondary-active: #374151;
35
+ --icon-tertiary: #5B6370;
36
+ --icon-disabled: #525A68;
37
37
  --icon-onbrand: #FFFFFF;
38
38
  --icon-onaccent: #FFFFFF;
39
39
 
package/dist/css/components-ext.css CHANGED
@@ -450,15 +450,15 @@
450
450
  }
451
451
 
452
452
  .ds-titlebar__traffic-btn--close {
453
- background-color: #FF5F57;
453
+ background-color: var(--status-error-default);
454
454
  }
455
455
 
456
456
  .ds-titlebar__traffic-btn--minimize {
457
- background-color: #FEBC2E;
457
+ background-color: var(--status-warning-default);
458
458
  }
459
459
 
460
460
  .ds-titlebar__traffic-btn--maximize {
461
- background-color: #28C840;
461
+ background-color: var(--status-success-default);
462
462
  }
463
463
 
464
464
  .ds-titlebar__project {
@@ -2210,7 +2210,7 @@
2210
2210
  width: 6px;
2211
2211
  height: 6px;
2212
2212
  border-radius: 50%;
2213
- background-color: #33b9c1;
2213
+ background-color: var(--status-info-default);
2214
2214
  }
2215
2215
 
2216
2216
  .ds-calendar__day.is-selected {
@@ -3920,15 +3920,15 @@
3920
3920
  }
3921
3921
 
3922
3922
  .ds-heatmap__cell--level-0 {
3923
- background-color: rgba(0, 0, 0, 0.1);
3923
+ background-color: var(--bg-overlay-l1);
3924
3924
  }
3925
3925
 
3926
3926
  .ds-heatmap__cell--level-1 {
3927
- background-color: rgba(34, 197, 94, 0.2);
3927
+ background-color: var(--status-success-surface-l2);
3928
3928
  }
3929
3929
 
3930
3930
  .ds-heatmap__cell--level-2 {
3931
- background-color: rgba(34, 197, 94, 0.4);
3931
+ background-color: var(--status-success-surface-l3);
3932
3932
  }
3933
3933
 
3934
3934
  .ds-heatmap__cell--level-3 {
@@ -3940,7 +3940,7 @@
3940
3940
  }
3941
3941
 
3942
3942
  .ds-heatmap__cell--level-5 {
3943
- background-color: #22c55e;
3943
+ background-color: var(--status-success-default);
3944
3944
  }
3945
3945
 
3946
3946
  .ds-heatmap__labels {
package/dist/css/table.css CHANGED
@@ -5,58 +5,58 @@
5
5
  .kupola-table-wrapper { width: 100%; }
6
6
  .kupola-table-container { overflow-x: auto; }
7
7
  .kupola-table { width: 100%; border-collapse: collapse; font-size: 14px; }
8
- .kupola-table th, .kupola-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e8e8e8; }
9
- .kupola-table th { background: #fafafa; font-weight: 600; color: #333; white-space: nowrap; }
10
- .kupola-table-striped tbody tr:nth-child(even) { background: #fafafa; }
11
- .kupola-table-hover tbody tr:hover { background: #f0f7ff; }
12
- .kupola-table-bordered { border: 1px solid #e8e8e8; }
13
- .kupola-table-bordered th, .kupola-table-bordered td { border: 1px solid #e8e8e8; }
8
+ .kupola-table th, .kupola-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-neutral-l1); }
9
+ .kupola-table th { background: var(--bg-base-secondary); font-weight: 600; color: var(--text-default); white-space: nowrap; }
10
+ .kupola-table-striped tbody tr:nth-child(even) { background: var(--bg-base-secondary); }
11
+ .kupola-table-hover tbody tr:hover { background: var(--status-primary-surface-l2); }
12
+ .kupola-table-bordered { border: 1px solid var(--border-neutral-l1); }
13
+ .kupola-table-bordered th, .kupola-table-bordered td { border: 1px solid var(--border-neutral-l1); }
14
14
  .kupola-table-compact th, .kupola-table-compact td { padding: 8px 12px; }
15
15
  .kupola-table-sortable { cursor: pointer; user-select: none; position: relative; }
16
- .kupola-table-sortable:hover { background: #f0f0f0; }
16
+ .kupola-table-sortable:hover { background: var(--bg-base-tertiary); }
17
17
  .kupola-table-sort-icon { font-size: 12px; opacity: 0.5; margin-left: 4px; }
18
18
  .kupola-table-sort-asc .kupola-table-sort-icon,
19
- .kupola-table-sort-desc .kupola-table-sort-icon { opacity: 1; color: #1890ff; }
20
- .kupola-table-empty, .kupola-table-loading { text-align: center; padding: 40px 16px !important; color: #999; }
19
+ .kupola-table-sort-desc .kupola-table-sort-icon { opacity: 1; color: var(--status-primary-default); }
20
+ .kupola-table-empty, .kupola-table-loading { text-align: center; padding: 40px 16px !important; color: var(--text-tertiary); }
21
21
  .kupola-table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
22
22
  .kupola-table-toolbar-right { display: flex; align-items: center; gap: 8px; }
23
- .kupola-table-filter-input { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; width: 240px; }
24
- .kupola-table-filter-input:focus { outline: none; border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.1); }
25
- .kupola-table-info { color: #999; font-size: 13px; }
26
- .kupola-table-selection-info { color: #1890ff; font-size: 13px; font-weight: 500; }
23
+ .kupola-table-filter-input { padding: 6px 12px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; font-size: 14px; width: 240px; }
24
+ .kupola-table-filter-input:focus { outline: none; border-color: var(--status-primary-default); box-shadow: 0 0 0 2px var(--status-primary-surface-l2); }
25
+ .kupola-table-info { color: var(--text-tertiary); font-size: 13px; }
26
+ .kupola-table-selection-info { color: var(--status-primary-default); font-size: 13px; font-weight: 500; }
27
27
  .kupola-table-col-selection { width: 40px; text-align: center; }
28
28
  .kupola-table-col-expand { width: 40px; text-align: center; }
29
- .kupola-table-expand-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; color: #666; }
30
- .kupola-table-expand-btn:hover { color: #1890ff; }
31
- .kupola-table-expand-row td { background: #fafafa; padding: 16px; }
32
- .kupola-table-row-selected { background: #e6f7ff !important; }
33
- .kupola-table-row-selected:hover { background: #bae7ff !important; }
29
+ .kupola-table-expand-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; color: var(--text-secondary); }
30
+ .kupola-table-expand-btn:hover { color: var(--status-primary-default); }
31
+ .kupola-table-expand-row td { background: var(--bg-base-secondary); padding: 16px; }
32
+ .kupola-table-row-selected { background: var(--status-primary-surface-l1) !important; }
33
+ .kupola-table-row-selected:hover { background: var(--status-primary-surface-l2) !important; }
34
34
 
35
35
  /* Resize */
36
36
  .kupola-table-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; background: transparent; }
37
- .kupola-table-resize-handle:hover { background: #1890ff; opacity: 0.3; }
37
+ .kupola-table-resize-handle:hover { background: var(--status-primary-default); opacity: 0.3; }
38
38
 
39
39
  /* Drag */
40
40
  .kupola-table-draggable { transition: opacity 0.2s; }
41
41
  .kupola-table-dragging { opacity: 0.4; }
42
- .kupola-table-drag-over { border-top: 2px solid #1890ff !important; }
42
+ .kupola-table-drag-over { border-top: 2px solid var(--status-primary-default) !important; }
43
43
 
44
44
  /* Edit */
45
45
  .kupola-table-editable-cell { cursor: text; }
46
- .kupola-table-editable-cell:hover { background: #e6f7ff; }
46
+ .kupola-table-editable-cell:hover { background: var(--status-primary-surface-l1); }
47
47
  .kupola-table-edit-cell { display: flex; gap: 4px; align-items: center; }
48
48
  .kupola-table-edit-input { flex: 1; padding: 2px 6px; font-size: 13px; }
49
49
  .kupola-table-edit-actions { display: flex; gap: 2px; }
50
- .kupola-table-edit-save, .kupola-table-edit-cancel { background: none; border: 1px solid #d9d9d9; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 12px; }
51
- .kupola-table-edit-save { color: #52c41a; border-color: #52c41a; }
52
- .kupola-table-edit-cancel { color: #ff4d4f; border-color: #ff4d4f; }
53
- .kupola-table-edit-save:hover { background: #f6ffed; }
54
- .kupola-table-edit-cancel:hover { background: #fff2f0; }
50
+ .kupola-table-edit-save, .kupola-table-edit-cancel { background: none; border: 1px solid var(--border-neutral-l2); border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 12px; }
51
+ .kupola-table-edit-save { color: var(--status-success-default); border-color: var(--status-success-default); }
52
+ .kupola-table-edit-cancel { color: var(--status-error-default); border-color: var(--status-error-default); }
53
+ .kupola-table-edit-save:hover { background: var(--status-success-surface-l1); }
54
+ .kupola-table-edit-cancel:hover { background: var(--status-error-surface-l1); }
55
55
 
56
56
  /* Tree */
57
57
  .kupola-table-tree-indent { display: inline-block; }
58
- .kupola-table-tree-toggle { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 4px; color: #666; }
59
- .kupola-table-tree-toggle:hover { color: #1890ff; }
58
+ .kupola-table-tree-toggle { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 4px; color: var(--text-secondary); }
59
+ .kupola-table-tree-toggle:hover { color: var(--status-primary-default); }
60
60
  .kupola-table-tree-toggle-placeholder { display: inline-block; width: 18px; }
61
61
 
62
62
  /* Virtual */
@@ -65,10 +65,10 @@
65
65
  /* Pagination */
66
66
  .kupola-table-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 0; }
67
67
  .kupola-table-pages { display: flex; gap: 4px; align-items: center; }
68
- .kupola-table-page-btn { min-width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
69
- .kupola-table-page-btn:hover:not(:disabled):not(.active) { border-color: #1890ff; color: #1890ff; }
70
- .kupola-table-page-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }
68
+ .kupola-table-page-btn { min-width: 32px; height: 32px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; background: var(--bg-base-default); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
69
+ .kupola-table-page-btn:hover:not(:disabled):not(.active) { border-color: var(--status-primary-default); color: var(--status-primary-default); }
70
+ .kupola-table-page-btn.active { background: var(--status-primary-default); color: var(--text-onbrand); border-color: var(--status-primary-default); }
71
71
  .kupola-table-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
72
- .kupola-table-page-ellipsis { padding: 0 4px; color: #999; }
73
- .kupola-table-page-size { padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
74
- .kupola-table-page-info { color: #999; font-size: 13px; }
72
+ .kupola-table-page-ellipsis { padding: 0 4px; color: var(--text-tertiary); }
73
+ .kupola-table-page-size { padding: 4px 8px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; font-size: 13px; }
74
+ .kupola-table-page-info { color: var(--text-tertiary); font-size: 13px; }
package/dist/css/theme-dark.css CHANGED
@@ -15,25 +15,25 @@
15
15
  --bg-invert-active: #E5E5E5;
16
16
  --bg-invert-disabled: rgba(255, 255, 255, 0.2);
17
17
 
18
- --text-default: #D1D3DB;
18
+ --text-default: #E5E7EB;
19
19
  --text-default-hover: #FFFFFF;
20
20
  --text-default-active: #FFFFFF;
21
- --text-secondary: #A0A5B2;
22
- --text-secondary-hover: #D1D3DB;
23
- --text-secondary-active: #D1D3DB;
24
- --text-tertiary: #7D8493;
25
- --text-disabled: #7D8493;
21
+ --text-secondary: #B8BDCA;
22
+ --text-secondary-hover: #E5E7EB;
23
+ --text-secondary-active: #E5E7EB;
24
+ --text-tertiary: #9CA3AF;
25
+ --text-disabled: #8B93A1;
26
26
  --text-onbrand: #FFFFFF;
27
27
  --text-onaccent: #FFFFFF;
28
28
 
29
- --icon-default: #D1D3DB;
29
+ --icon-default: #E5E7EB;
30
30
  --icon-default-hover: #FFFFFF;
31
31
  --icon-default-active: #FFFFFF;
32
- --icon-secondary: #9599A6;
33
- --icon-secondary-hover: #D1D3DB;
34
- --icon-secondary-active: #D1D3DB;
35
- --icon-tertiary: #7D8493;
36
- --icon-disabled: #7D8493;
32
+ --icon-secondary: #B8BDCA;
33
+ --icon-secondary-hover: #E5E7EB;
34
+ --icon-secondary-active: #E5E7EB;
35
+ --icon-tertiary: #9CA3AF;
36
+ --icon-disabled: #8B93A1;
37
37
  --icon-onbrand: #FFFFFF;
38
38
  --icon-onaccent: #FFFFFF;
39
39
 
package/dist/css/theme-light.css CHANGED
@@ -15,25 +15,25 @@
15
15
  --bg-invert-active: #3A3E44;
16
16
  --bg-invert-disabled: rgba(0, 0, 0, 0.2);
17
17
 
18
- --text-default: #1A1B1D;
19
- --text-default-hover: #0C0C0D;
20
- --text-default-active: #0C0C0D;
21
- --text-secondary: #666B75;
22
- --text-secondary-hover: #3A3E44;
23
- --text-secondary-active: #3A3E44;
24
- --text-tertiary: #6B7280;
25
- --text-disabled: #6F7482;
18
+ --text-default: #0F1117;
19
+ --text-default-hover: #000000;
20
+ --text-default-active: #000000;
21
+ --text-secondary: #4B5563;
22
+ --text-secondary-hover: #374151;
23
+ --text-secondary-active: #374151;
24
+ --text-tertiary: #5B6370;
25
+ --text-disabled: #525A68;
26
26
  --text-onbrand: #FFFFFF;
27
27
  --text-onaccent: #FFFFFF;
28
28
 
29
- --icon-default: #1A1B1D;
30
- --icon-default-hover: #0C0C0D;
31
- --icon-default-active: #0C0C0D;
32
- --icon-secondary: #666B75;
33
- --icon-secondary-hover: #3A3E44;
34
- --icon-secondary-active: #3A3E44;
35
- --icon-tertiary: #6B7280;
36
- --icon-disabled: #6F7482;
29
+ --icon-default: #0F1117;
30
+ --icon-default-hover: #000000;
31
+ --icon-default-active: #000000;
32
+ --icon-secondary: #4B5563;
33
+ --icon-secondary-hover: #374151;
34
+ --icon-secondary-active: #374151;
35
+ --icon-tertiary: #5B6370;
36
+ --icon-disabled: #525A68;
37
37
  --icon-onbrand: #FFFFFF;
38
38
  --icon-onaccent: #FFFFFF;
39
39