@snack-uikit/table 0.14.2 → 0.14.3

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ ## 0.14.3 (2024-02-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-4297:** apply system-layer tokens ([7c8fd4b](https://github.com/cloud-ru-tech/snack-uikit/commit/7c8fd4b5334360b2fc31da92973b6835ffa287af))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.14.2 (2024-02-13)
7
18
 
8
19
 
@@ -8,18 +8,13 @@
8
8
  width:100%;
9
9
  height:auto;
10
10
  max-height:calc(var(--page-size, 10) * var(--size-table-line-height, 40px) + var(--size-table-line-height, 40px) + var(--border-width-table, 1px) * 2);
11
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
12
- border-color:var(--sys-neutral-background1-level, #f9f9f9);
11
+ background-color:var(--sys-neutral-background1-level, #fafafc);
12
+ border-color:var(--sys-neutral-background1-level, #fafafc);
13
13
  border-style:solid;
14
14
  }
15
15
 
16
16
  .scrollWrapper[data-outline] .table{
17
- border-color:var(--sys-neutral-decor-default, #dedede);
18
- }
19
-
20
- .tableContent{
21
- min-width:-moz-max-content;
22
- min-width:max-content;
17
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
23
18
  }
24
19
 
25
20
  .header{
@@ -29,6 +24,11 @@
29
24
  flex-direction:column;
30
25
  }
31
26
 
27
+ .tableContent{
28
+ min-width:-moz-max-content;
29
+ min-width:max-content;
30
+ }
31
+
32
32
  .toolbar{
33
33
  flex:1 0 auto;
34
34
  }
@@ -2,7 +2,7 @@
2
2
  gap:var(--space-table-cell-gap, 4px);
3
3
  padding-left:var(--space-table-cell-padding, 8px);
4
4
  padding-right:var(--space-table-cell-padding, 8px);
5
- color:var(--sys-neutral-text-main, #333333);
5
+ color:var(--sys-neutral-text-main, #33333b);
6
6
  }
7
7
  .tableBodyCell[data-align=right]{
8
8
  justify-content:flex-end;
@@ -17,7 +17,7 @@
17
17
  transform:translateX(-50%);
18
18
  width:var(--border-width-table, 1px);
19
19
  height:100%;
20
- background-color:var(--sys-neutral-decor-hovered, #d2d2d2);
20
+ background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
21
21
  }
22
22
  .tableHeaderResizeHandle[data-resizing]{
23
23
  opacity:0;
@@ -42,7 +42,7 @@
42
42
  transform:translateX(-50%);
43
43
  width:calc(100% - var(--space-table-head-separator-padding, 8px) * 2);
44
44
  height:var(--border-width-table, 1px);
45
- background-color:var(--sys-neutral-decor-default, #dedede);
45
+ background-color:var(--sys-neutral-decor-default, #dfe2ec);
46
46
  }
47
47
  .tableHeaderCell:hover .tableHeaderResizeHandle:not([data-resizing]){
48
48
  opacity:1;
@@ -81,17 +81,17 @@
81
81
  align-items:center;
82
82
  box-sizing:border-box;
83
83
  min-width:0;
84
- color:var(--sys-neutral-text-light, #898989);
84
+ color:var(--sys-neutral-text-light, #868892);
85
85
  }
86
86
 
87
87
  .tableHeaderIcon{
88
88
  display:flex;
89
89
  box-sizing:border-box;
90
- color:var(--sys-neutral-text-light, #898989);
90
+ color:var(--sys-neutral-text-light, #868892);
91
91
  }
92
92
  .tableHeaderIcon svg{
93
- width:var(--dimension-2m, 16px) !important;
94
- height:var(--dimension-2m, 16px) !important;
93
+ width:var(--size-icon-container-xs, 16px) !important;
94
+ height:var(--size-icon-container-xs, 16px) !important;
95
95
  }
96
96
 
97
97
  .tableHeaderResizeIndicator{
@@ -102,7 +102,7 @@
102
102
  right:0;
103
103
  width:1px;
104
104
  height:100%;
105
- background-color:var(--sys-neutral-decor-activated, #b8b8b8);
105
+ background-color:var(--sys-neutral-decor-activated, #bfc2cc);
106
106
  }
107
107
  .tableHeaderResizeIndicator::after{
108
108
  content:"";
@@ -14,7 +14,7 @@
14
14
  .statusCellLabel{
15
15
  box-sizing:border-box;
16
16
  min-width:0;
17
- color:var(--sys-neutral-text-support, #565656);
17
+ color:var(--sys-neutral-text-support, #656771);
18
18
  }
19
19
 
20
20
  .statusCellIndicator{
@@ -44,28 +44,28 @@
44
44
  background-color:var(--sys-primary-accent-default, #794ed3);
45
45
  }
46
46
  .statusCellIndicator[data-appearance=neutral]::after{
47
- background-color:var(--sys-neutral-accent-default, #757575);
47
+ background-color:var(--sys-neutral-accent-default, #6f717c);
48
48
  }
49
49
  .statusCellIndicator[data-appearance=red]::after{
50
- background-color:var(--sys-red-accent-default, #d93f2f);
50
+ background-color:var(--sys-red-accent-default, #cd3c3c);
51
51
  }
52
52
  .statusCellIndicator[data-appearance=orange]::after{
53
- background-color:var(--sys-orange-accent-default, #fd8f1a);
53
+ background-color:var(--sys-orange-accent-default, #ff8b37);
54
54
  }
55
55
  .statusCellIndicator[data-appearance=yellow]::after{
56
- background-color:var(--sys-yellow-accent-default, #feb528);
56
+ background-color:var(--sys-yellow-accent-default, #fdca46);
57
57
  }
58
58
  .statusCellIndicator[data-appearance=green]::after{
59
- background-color:var(--sys-green-accent-default, #0bbe8f);
59
+ background-color:var(--sys-green-accent-default, #57b762);
60
60
  }
61
61
  .statusCellIndicator[data-appearance=blue]::after{
62
- background-color:var(--sys-blue-accent-default, #3280e8);
62
+ background-color:var(--sys-blue-accent-default, #5388d1);
63
63
  }
64
64
  .statusCellIndicator[data-appearance=violet]::after{
65
- background-color:var(--sys-violet-accent-default, #bc52bf);
65
+ background-color:var(--sys-violet-accent-default, #b468b5);
66
66
  }
67
67
  .statusCellIndicator[data-appearance=pink]::after{
68
- background-color:var(--sys-pink-accent-default, #e14487);
68
+ background-color:var(--sys-pink-accent-default, #d1668e);
69
69
  }
70
70
  .statusCellIndicator[data-loading]{
71
71
  position:relative;
@@ -76,7 +76,7 @@
76
76
  left:0;
77
77
  width:100%;
78
78
  height:auto;
79
- background-color:var(--sys-neutral-decor-default, #dedede);
79
+ background-color:var(--sys-neutral-decor-default, #dfe2ec);
80
80
  animation:loading ease-in-out 0.8s infinite alternate;
81
81
  }
82
82
 
@@ -1,5 +1,5 @@
1
1
  .tableRow{
2
- --snack-ui-table-row-background:var(--sys-neutral-background1-level, #f9f9f9);
2
+ --snack-ui-table-row-background:var(--sys-neutral-background1-level, #fafafc);
3
3
  height:var(--size-table-line-height, 40px);
4
4
  border-top:var(--border-width-table, 1px);
5
5
  border-bottom:var(--border-width-table, 1px);
@@ -17,7 +17,7 @@
17
17
  display:flex;
18
18
  box-sizing:border-box;
19
19
  background-color:var(--snack-ui-table-row-background);
20
- border-color:var(--sys-neutral-decor-default, #dedede);
20
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
21
21
  }
22
22
  .rowPinnedCells::after{
23
23
  pointer-events:none;
@@ -47,10 +47,10 @@
47
47
 
48
48
  .bodyRow[data-disabled]{
49
49
  cursor:not-allowed;
50
- background-color:var(--sys-neutral-background, #f0f0f0);
50
+ background-color:var(--sys-neutral-background, #f1f2f6);
51
51
  }
52
52
  .bodyRow[data-disabled] .rowPinnedCells{
53
- background-color:var(--sys-neutral-background, #f0f0f0);
53
+ background-color:var(--sys-neutral-background, #f1f2f6);
54
54
  }
55
55
  .bodyRow[data-selected]{
56
56
  background-color:color-mix(in srgb, var(--sys-primary-accent-default, #794ed3), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
@@ -71,11 +71,11 @@
71
71
  cursor:pointer;
72
72
  }
73
73
  .bodyRow:not([data-disabled]):not([data-selected]):hover, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened]{
74
- background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #757575), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
75
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
74
+ background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #6f717c), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
75
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
76
76
  }
77
77
  .bodyRow:not([data-disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
78
- background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #757575), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
78
+ background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #6f717c), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
79
79
  border-color:inherit;
80
80
  }
81
81
 
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Table",
7
- "version": "0.14.2",
7
+ "version": "0.14.3",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -32,19 +32,19 @@
32
32
  "license": "Apache-2.0",
33
33
  "scripts": {},
34
34
  "dependencies": {
35
- "@snack-uikit/button": "0.16.0",
36
- "@snack-uikit/chips": "0.11.6",
37
- "@snack-uikit/icon-predefined": "0.4.1",
35
+ "@snack-uikit/button": "0.16.1",
36
+ "@snack-uikit/chips": "0.11.7",
37
+ "@snack-uikit/icon-predefined": "0.4.2",
38
38
  "@snack-uikit/icons": "0.20.1",
39
- "@snack-uikit/info-block": "0.1.2",
40
- "@snack-uikit/list": "0.3.3",
41
- "@snack-uikit/pagination": "0.6.3",
39
+ "@snack-uikit/info-block": "0.1.3",
40
+ "@snack-uikit/list": "0.3.4",
41
+ "@snack-uikit/pagination": "0.6.4",
42
42
  "@snack-uikit/scroll": "0.5.1",
43
- "@snack-uikit/skeleton": "0.3.2",
44
- "@snack-uikit/tag": "0.7.3",
45
- "@snack-uikit/toggles": "0.9.5",
46
- "@snack-uikit/toolbar": "0.7.10",
47
- "@snack-uikit/truncate-string": "0.4.7",
43
+ "@snack-uikit/skeleton": "0.3.3",
44
+ "@snack-uikit/tag": "0.7.4",
45
+ "@snack-uikit/toggles": "0.9.6",
46
+ "@snack-uikit/toolbar": "0.7.11",
47
+ "@snack-uikit/truncate-string": "0.4.8",
48
48
  "@snack-uikit/typography": "0.6.1",
49
49
  "@snack-uikit/utils": "3.2.0",
50
50
  "@tanstack/match-sorter-utils": "8.8.4",
@@ -58,5 +58,5 @@
58
58
  "peerDependencies": {
59
59
  "@snack-uikit/locale": "*"
60
60
  },
61
- "gitHead": "2a64233470f28de9e0b08c1c219bd0e4cbd6ba20"
61
+ "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
62
62
  }
@@ -27,10 +27,6 @@
27
27
  }
28
28
  }
29
29
 
30
- .tableContent {
31
- min-width: max-content;
32
- }
33
-
34
30
  .header {
35
31
  @include composite-var($table-header);
36
32
 
@@ -38,6 +34,11 @@
38
34
  flex-direction: column;
39
35
  }
40
36
 
37
+ .tableContent {
38
+ min-width: max-content;
39
+ }
40
+
41
+
41
42
  .toolbar {
42
43
  flex: 1 0 auto;
43
44
  }