@snack-uikit/table 0.24.0 → 0.25.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 (15) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/helperComponents/Cells/RowActionsCell/styles.module.css +3 -3
  3. package/dist/esm/helperComponents/Cells/RowActionsCell/styles.module.css +3 -3
  4. package/package.json +16 -16
  5. package/src/components/Table/styles.module.scss +16 -14
  6. package/src/helperComponents/Cells/BodyCell/styles.module.scss +3 -3
  7. package/src/helperComponents/Cells/CopyCell/styles.module.scss +3 -3
  8. package/src/helperComponents/Cells/HeaderCell/styles.module.scss +20 -18
  9. package/src/helperComponents/Cells/RowActionsCell/styles.module.scss +11 -9
  10. package/src/helperComponents/Cells/SelectionCell/styles.module.scss +2 -2
  11. package/src/helperComponents/Cells/StatusCell/styles.module.scss +11 -11
  12. package/src/helperComponents/Cells/styles.module.scss +2 -2
  13. package/src/helperComponents/Rows/styles.module.scss +24 -23
  14. package/src/helperComponents/TableEmptyState/styles.module.scss +3 -3
  15. package/src/helperComponents/TablePagination/styles.module.scss +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.25.1 (2024-10-31)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-438:** stylelint update ([9d40d4e](https://github.com/cloud-ru-tech/snack-uikit/commit/9d40d4eb445eeaaca5a2dc1f6421d496f86aeac3))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.25.0 (2024-10-28)
18
+
19
+
20
+ ### Features
21
+
22
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
23
+
24
+
25
+
26
+
27
+
6
28
  # 0.24.0 (2024-10-28)
7
29
 
8
30
 
package/dist/cjs/helperComponents/Cells/RowActionsCell/styles.module.css CHANGED
@@ -18,12 +18,12 @@
18
18
  .rowActionsCellWrap{
19
19
  --offset:0px;
20
20
  cursor:pointer;
21
+ display:flex;
22
+ align-items:center;
23
+ justify-content:center;
21
24
  box-sizing:border-box;
22
25
  width:100%;
23
26
  height:100%;
24
27
  padding-left:var(--space-table-cell-action-padding, 4px);
25
28
  padding-right:var(--space-table-cell-action-padding, 4px);
26
- display:flex;
27
- align-items:center;
28
- justify-content:center;
29
29
  }
package/dist/esm/helperComponents/Cells/RowActionsCell/styles.module.css CHANGED
@@ -18,12 +18,12 @@
18
18
  .rowActionsCellWrap{
19
19
  --offset:0px;
20
20
  cursor:pointer;
21
+ display:flex;
22
+ align-items:center;
23
+ justify-content:center;
21
24
  box-sizing:border-box;
22
25
  width:100%;
23
26
  height:100%;
24
27
  padding-left:var(--space-table-cell-action-padding, 4px);
25
28
  padding-right:var(--space-table-cell-action-padding, 4px);
26
- display:flex;
27
- align-items:center;
28
- justify-content:center;
29
29
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Table",
7
- "version": "0.24.0",
7
+ "version": "0.25.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,19 +36,19 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.18.0",
40
- "@snack-uikit/chips": "0.17.0",
41
- "@snack-uikit/icon-predefined": "0.6.0",
42
- "@snack-uikit/icons": "0.23.0",
43
- "@snack-uikit/info-block": "0.5.0",
44
- "@snack-uikit/list": "0.19.0",
45
- "@snack-uikit/pagination": "0.8.0",
46
- "@snack-uikit/scroll": "0.7.0",
47
- "@snack-uikit/skeleton": "0.4.0",
48
- "@snack-uikit/toggles": "0.11.0",
49
- "@snack-uikit/toolbar": "0.8.0",
50
- "@snack-uikit/truncate-string": "0.5.0",
51
- "@snack-uikit/typography": "0.7.0",
39
+ "@snack-uikit/button": "0.19.1",
40
+ "@snack-uikit/chips": "0.19.0",
41
+ "@snack-uikit/icon-predefined": "0.7.0",
42
+ "@snack-uikit/icons": "0.24.0",
43
+ "@snack-uikit/info-block": "0.6.1",
44
+ "@snack-uikit/list": "0.21.0",
45
+ "@snack-uikit/pagination": "0.9.1",
46
+ "@snack-uikit/scroll": "0.9.0",
47
+ "@snack-uikit/skeleton": "0.5.0",
48
+ "@snack-uikit/toggles": "0.12.0",
49
+ "@snack-uikit/toolbar": "0.9.1",
50
+ "@snack-uikit/truncate-string": "0.6.0",
51
+ "@snack-uikit/typography": "0.8.0",
52
52
  "@snack-uikit/utils": "3.5.0",
53
53
  "@tanstack/match-sorter-utils": "8.11.8",
54
54
  "@tanstack/react-table": "8.12.0",
@@ -56,10 +56,10 @@
56
56
  "copy-to-clipboard": "3.3.3",
57
57
  "lodash.debounce": "4.0.8",
58
58
  "uncontrollable": "8.0.0",
59
- "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
59
+ "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "@snack-uikit/locale": "*"
63
63
  },
64
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
64
+ "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
65
65
  }
package/src/components/Table/styles.module.scss CHANGED
@@ -1,9 +1,10 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  .table {
4
- @include composite-var($table-table-container);
4
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-table-container);
5
5
 
6
6
  position: relative;
7
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
7
8
  z-index: 0;
8
9
 
9
10
  /* stylelint-disable-next-line declaration-no-important */
@@ -14,24 +15,24 @@
14
15
  width: 100%;
15
16
  height: auto;
16
17
  max-height: calc(
17
- (var(--page-size, 10) * $size-table-line-height) + $size-table-line-height + $border-width-table * 2
18
+ (var(--page-size, 10) * styles-tokens-table.$size-table-line-height) + styles-tokens-table.$size-table-line-height + styles-tokens-table.$border-width-table * 2
18
19
  );
19
20
 
20
- background-color: $sys-neutral-background1-level;
21
- border-color: $sys-neutral-background1-level;
21
+ background-color: styles-tokens-table.$sys-neutral-background1-level;
22
+ border-color: styles-tokens-table.$sys-neutral-background1-level;
22
23
  border-style: solid;
23
24
  }
24
25
 
25
26
  .scrollWrapper {
26
27
  &[data-outline] {
27
28
  .table {
28
- border-color: $sys-neutral-decor-default;
29
+ border-color: styles-tokens-table.$sys-neutral-decor-default;
29
30
  }
30
31
  }
31
32
  }
32
33
 
33
34
  .header {
34
- @include composite-var($table-header);
35
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-header);
35
36
 
36
37
  display: flex;
37
38
  flex-direction: column;
@@ -48,13 +49,13 @@
48
49
  .filtersWrapper {
49
50
  display: flex;
50
51
  flex-wrap: wrap;
51
- gap: $dimension-1m;
52
+ gap: styles-tokens-table.$dimension-1m;
52
53
  align-items: center;
53
54
  justify-content: flex-start;
54
55
  }
55
56
 
56
57
  .skeleton {
57
- padding: 0 $dimension-1m;
58
+ padding: 0 styles-tokens-table.$dimension-1m;
58
59
  }
59
60
 
60
61
  .wrapper {
@@ -62,17 +63,18 @@
62
63
  }
63
64
 
64
65
  .scrollStub {
65
- height: calc($dimension-025m / 2);
66
- margin-top: calc($dimension-025m / -2);
66
+ height: calc(styles-tokens-table.$dimension-025m / 2);
67
+ margin-top: calc(styles-tokens-table.$dimension-025m / -2);
67
68
  background: transparent;
68
69
  }
69
70
 
70
71
  .topRowWrapper {
71
72
  position: sticky;
73
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
72
74
  z-index: 3;
73
- top: calc($size-table-line-height);
75
+ top: calc(styles-tokens-table.$size-table-line-height);
74
76
 
75
- margin-bottom: calc(-1 * $border-width-table);
77
+ margin-bottom: calc(-1 * styles-tokens-table.$border-width-table);
76
78
 
77
- border-bottom: $border-width-table solid $sys-neutral-decor-default;
79
+ border-bottom: styles-tokens-table.$border-width-table solid styles-tokens-table.$sys-neutral-decor-default;
78
80
  }
package/src/helperComponents/Cells/BodyCell/styles.module.scss CHANGED
@@ -1,9 +1,9 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  .tableBodyCell {
4
- @include composite-var($table-cells);
4
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-cells);
5
5
 
6
- color: $sys-neutral-text-main;
6
+ color: styles-tokens-table.$sys-neutral-text-main;
7
7
 
8
8
  &[data-align='right'] {
9
9
  justify-content: flex-end;
package/src/helperComponents/Cells/CopyCell/styles.module.scss CHANGED
@@ -1,10 +1,10 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
1
+ @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
2
2
 
3
3
  .copyCell {
4
4
  cursor: pointer;
5
5
 
6
6
  display: flex;
7
- gap: $dimension-050m;
7
+ gap: styles-theme-variables.$dimension-050m;
8
8
  align-items: center;
9
9
 
10
10
  width: 100%;
@@ -16,7 +16,7 @@
16
16
  }
17
17
 
18
18
  &:hover {
19
- margin-right: calc(0px - calc($dimension-4m + $dimension-050m));
19
+ margin-right: calc(0px - calc(styles-theme-variables.$dimension-4m + styles-theme-variables.$dimension-050m));
20
20
 
21
21
  .copyButton {
22
22
  display: inline-flex;
package/src/helperComponents/Cells/HeaderCell/styles.module.scss CHANGED
@@ -1,16 +1,17 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  .tableHeaderResizeHandle {
5
5
  cursor: ew-resize;
6
6
 
7
7
  position: absolute;
8
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
8
9
  z-index: 1;
9
10
  top: 0;
10
11
  right: 0;
11
12
  transform: translateX(50%);
12
13
 
13
- width: $dimension-1m;
14
+ width: styles-tokens-table.$dimension-1m;
14
15
  height: 100%;
15
16
 
16
17
  opacity: 0;
@@ -23,10 +24,10 @@
23
24
  left: 50%;
24
25
  transform: translateX(-50%);
25
26
 
26
- width: $border-width-table;
27
+ width: styles-tokens-table.$border-width-table;
27
28
  height: 100%;
28
29
 
29
- background-color: $sys-neutral-decor-hovered;
30
+ background-color: styles-tokens-table.$sys-neutral-decor-hovered;
30
31
  }
31
32
 
32
33
  &[data-resizing] {
@@ -38,6 +39,7 @@
38
39
  cursor: col-resize;
39
40
 
40
41
  position: absolute;
42
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
41
43
  z-index: 2;
42
44
  top: 0;
43
45
  right: 0;
@@ -46,7 +48,7 @@
46
48
  width: 1px;
47
49
  height: 100%;
48
50
 
49
- background-color: $sys-neutral-decor-activated;
51
+ background-color: styles-tokens-table.$sys-neutral-decor-activated;
50
52
 
51
53
  &::after {
52
54
  content: '';
@@ -56,13 +58,13 @@
56
58
  left: 0;
57
59
  transform: translateX(-50%);
58
60
 
59
- width: calc(100% + $dimension-4m);
61
+ width: calc(100% + styles-tokens-table.$dimension-4m);
60
62
  height: 100%;
61
63
  }
62
64
  }
63
65
 
64
66
  .tableHeaderCell {
65
- @include composite-var($table-head-column);
67
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-head-column);
66
68
 
67
69
  position: relative;
68
70
 
@@ -84,10 +86,10 @@
84
86
  left: 50%;
85
87
  transform: translateX(-50%);
86
88
 
87
- width: calc(100% - $space-table-head-separator-padding * 2);
88
- height: $border-width-table;
89
+ width: calc(100% - styles-tokens-table.$space-table-head-separator-padding * 2);
90
+ height: styles-tokens-table.$border-width-table;
89
91
 
90
- background-color: $sys-neutral-decor-default;
92
+ background-color: styles-tokens-table.$sys-neutral-decor-default;
91
93
  }
92
94
 
93
95
  &:hover {
@@ -104,7 +106,7 @@
104
106
  &::after {
105
107
  left: 0;
106
108
  transform: none;
107
- width: calc(100% - $space-table-head-separator-padding);
109
+ width: calc(100% - styles-tokens-table.$space-table-head-separator-padding);
108
110
  }
109
111
  }
110
112
 
@@ -134,7 +136,7 @@
134
136
  }
135
137
 
136
138
  .tableHeaderResizeIndicator {
137
- right: calc($dimension-1m / 2);
139
+ right: calc(styles-tokens-table.$dimension-1m / 2);
138
140
  }
139
141
  }
140
142
  }
@@ -150,7 +152,7 @@
150
152
  }
151
153
 
152
154
  .tableHeaderCellName {
153
- @include composite-var($table-head-name-layout);
155
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-head-name-layout);
154
156
 
155
157
  display: inline-flex;
156
158
  align-items: center;
@@ -158,16 +160,16 @@
158
160
  box-sizing: border-box;
159
161
  min-width: 0;
160
162
 
161
- color: simple-var($sys-neutral-text-light);
163
+ color: styles-tokens-table.simple-var(styles-tokens-table.$sys-neutral-text-light);
162
164
  }
163
165
 
164
166
  .tableHeaderIcon {
165
167
  display: flex;
166
168
  box-sizing: border-box;
167
- color: simple-var($sys-neutral-text-light);
169
+ color: styles-tokens-table.simple-var(styles-tokens-table.$sys-neutral-text-light);
168
170
 
169
171
  svg {
170
- width: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
171
- height: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
172
+ width: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
173
+ height: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
172
174
  }
173
175
  }
package/src/helperComponents/Cells/RowActionsCell/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  .rowActionsCell {
4
4
  position: relative;
@@ -9,15 +9,15 @@
9
9
  content: '';
10
10
 
11
11
  position: absolute;
12
- top: calc(0px - $border-width-table);
13
- bottom: calc(0px - $border-width-table);
12
+ top: calc(0px - styles-tokens-table.$border-width-table);
13
+ bottom: calc(0px - styles-tokens-table.$border-width-table);
14
14
  left: 0;
15
15
 
16
16
  box-sizing: border-box;
17
17
  width: 100%;
18
18
 
19
19
  /* stylelint-disable */
20
- border-left: $border-width-table solid;
20
+ border-left: styles-tokens-table.$border-width-table solid;
21
21
  border-color: inherit;
22
22
  /* stylelint-enable */
23
23
  }
@@ -25,14 +25,16 @@
25
25
 
26
26
  .rowActionsCellWrap {
27
27
  --offset: 0px;
28
- cursor: pointer;
29
- box-sizing: border-box;
30
- width: 100%;
31
- height: 100%;
32
28
 
33
- @include composite-var($table-cells-action);
29
+ cursor: pointer;
34
30
 
35
31
  display: flex;
36
32
  align-items: center;
37
33
  justify-content: center;
34
+
35
+ box-sizing: border-box;
36
+ width: 100%;
37
+ height: 100%;
38
+
39
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-cells-action);
38
40
  }
package/src/helperComponents/Cells/SelectionCell/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  .selectionCell {
4
- @include composite-var($table-cell-check);
4
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-cell-check);
5
5
 
6
6
  cursor: pointer;
7
7
 
package/src/helperComponents/Cells/StatusCell/styles.module.scss CHANGED
@@ -1,16 +1,16 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue', 'violet', 'pink';
4
4
 
5
5
  .statusCell {
6
6
  display: flex;
7
- gap: $space-table-cell-gap;
7
+ gap: styles-tokens-table.$space-table-cell-gap;
8
8
  align-items: center;
9
9
 
10
10
  box-sizing: border-box;
11
11
  width: 100%;
12
12
  height: 100%;
13
- padding-right: $space-table-cell-padding;
13
+ padding-right: styles-tokens-table.$space-table-cell-padding;
14
14
 
15
15
  &[data-no-label] {
16
16
  padding-right: 0;
@@ -20,11 +20,11 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
20
20
  .statusCellLabel {
21
21
  box-sizing: border-box;
22
22
  min-width: 0;
23
- color: $sys-neutral-text-support;
23
+ color: styles-tokens-table.$sys-neutral-text-support;
24
24
  }
25
25
 
26
26
  .statusCellIndicator {
27
- @include composite-var($table-status-indicator);
27
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-status-indicator);
28
28
 
29
29
  position: relative;
30
30
 
@@ -34,12 +34,12 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
34
34
  justify-content: center;
35
35
 
36
36
  box-sizing: border-box;
37
- width: $size-table-cell-status-indicator-horizontal;
37
+ width: styles-tokens-table.$size-table-cell-status-indicator-horizontal;
38
38
 
39
39
  background-color: inherit;
40
40
 
41
41
  &::after {
42
- @include composite-var($table-status-indicator);
42
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-status-indicator);
43
43
 
44
44
  content: '';
45
45
 
@@ -55,7 +55,7 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
55
55
  @each $appearance in $appearances {
56
56
  &[data-appearance='#{$appearance}'] {
57
57
  &::after {
58
- background-color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
58
+ background-color: styles-tokens-table.simple-var(styles-tokens-table.$theme-variables, 'sys', $appearance, 'accent-default');
59
59
  }
60
60
  }
61
61
  }
@@ -72,7 +72,7 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
72
72
  width: 100%;
73
73
  height: auto;
74
74
 
75
- background-color: $sys-neutral-decor-default;
75
+ background-color: styles-tokens-table.$sys-neutral-decor-default;
76
76
 
77
77
  animation: loading ease-in-out 0.8s infinite alternate;
78
78
  }
@@ -82,14 +82,14 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
82
82
  @keyframes loading {
83
83
  0% {
84
84
  top: 0;
85
- bottom: calc(100% - $dimension-050m);
85
+ bottom: calc(100% - styles-tokens-table.$dimension-050m);
86
86
  }
87
87
  50% {
88
88
  top: 0;
89
89
  bottom: 0;
90
90
  }
91
91
  100% {
92
- top: calc(100% - $dimension-050m);
92
+ top: calc(100% - styles-tokens-table.$dimension-050m);
93
93
  bottom: 0;
94
94
  }
95
95
  }
package/src/helperComponents/Cells/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  .tableCell {
4
- @include composite-var($sans-body-m);
4
+ @include styles-tokens-table.composite-var(styles-tokens-table.$sans-body-m);
5
5
 
6
6
  display: flex;
7
7
  align-items: center;
package/src/helperComponents/Rows/styles.module.scss CHANGED
@@ -1,16 +1,15 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
3
2
 
4
3
  $snack-ui-table-row-background: var(--snack-ui-table-row-background);
5
4
 
6
5
  @function color-with-opacity-local($color, $opacity) {
7
- @return color-on-background-with-opacity($color, $snack-ui-table-row-background, $opacity);
6
+ @return styles-tokens-table.color-on-background-with-opacity($color, $snack-ui-table-row-background, $opacity);
8
7
  }
9
8
 
10
9
  .tableRow {
11
- --snack-ui-table-row-background: #{$sys-neutral-background1-level};
10
+ --snack-ui-table-row-background: #{styles-tokens-table.$sys-neutral-background1-level};
12
11
 
13
- @include composite-var($table-line-container);
12
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-line-container);
14
13
 
15
14
  position: relative;
16
15
 
@@ -25,6 +24,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
25
24
 
26
25
  .rowPinnedCells {
27
26
  position: sticky;
27
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
28
28
  z-index: 1;
29
29
 
30
30
  display: flex;
@@ -32,18 +32,18 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
32
32
  box-sizing: border-box;
33
33
 
34
34
  background-color: $snack-ui-table-row-background;
35
- border-color: $sys-neutral-decor-default;
35
+ border-color: styles-tokens-table.$sys-neutral-decor-default;
36
36
 
37
37
  &::after {
38
38
  pointer-events: none;
39
39
  content: '';
40
40
 
41
41
  position: absolute;
42
- top: calc(0px - $border-width-table);
43
- bottom: calc(0px - $border-width-table);
42
+ top: calc(0px - styles-tokens-table.$border-width-table);
43
+ bottom: calc(0px - styles-tokens-table.$border-width-table);
44
44
 
45
45
  box-sizing: border-box;
46
- width: $border-width-table;
46
+ width: styles-tokens-table.$border-width-table;
47
47
  }
48
48
 
49
49
  &[data-position='left'] {
@@ -53,7 +53,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
53
53
  right: 0;
54
54
 
55
55
  /* stylelint-disable */
56
- border-right: $border-width-table solid;
56
+ border-right: styles-tokens-table.$border-width-table solid;
57
57
  border-color: inherit;
58
58
  /* stylelint-enable */
59
59
  }
@@ -67,7 +67,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
67
67
  left: 0;
68
68
 
69
69
  /* stylelint-disable */
70
- border-left: $border-width-table solid;
70
+ border-left: styles-tokens-table.$border-width-table solid;
71
71
  border-color: inherit;
72
72
  /* stylelint-enable */
73
73
  }
@@ -77,28 +77,28 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
77
77
  .bodyRow {
78
78
  &[data-disabled] {
79
79
  cursor: not-allowed;
80
- background-color: $sys-neutral-background;
80
+ background-color: styles-tokens-table.$sys-neutral-background;
81
81
 
82
82
  .rowPinnedCells {
83
- background-color: $sys-neutral-background;
83
+ background-color: styles-tokens-table.$sys-neutral-background;
84
84
  }
85
85
  }
86
86
 
87
87
  &[data-selected] {
88
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a008);
88
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
89
89
 
90
90
  .rowPinnedCells {
91
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a008);
92
- border-color: $sys-primary-decor-activated;
91
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
92
+ border-color: styles-tokens-table.$sys-primary-decor-activated;
93
93
  }
94
94
 
95
95
  &:hover, &[data-actions-opened] {
96
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
97
- border-color: $sys-primary-decor-hovered;
96
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a016);
97
+ border-color: styles-tokens-table.$sys-primary-decor-hovered;
98
98
 
99
99
  .rowPinnedCells {
100
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
101
- border-color: $sys-primary-decor-activated;
100
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a016);
101
+ border-color: styles-tokens-table.$sys-primary-decor-activated;
102
102
  }
103
103
  }
104
104
  }
@@ -109,11 +109,11 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
109
109
 
110
110
  &:not([data-disabled]):not([data-selected]) {
111
111
  &:hover, &[data-actions-opened] {
112
- background-color: color-with-opacity-local($sys-neutral-accent-default, $opacity-a008);
113
- border-color: $sys-neutral-decor-hovered;
112
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
113
+ border-color: styles-tokens-table.$sys-neutral-decor-hovered;
114
114
 
115
115
  .rowPinnedCells {
116
- background-color: color-with-opacity-local($sys-neutral-accent-default, $opacity-a008);
116
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
117
117
  border-color: inherit;
118
118
  }
119
119
  }
@@ -122,6 +122,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
122
122
 
123
123
  .tableHeader {
124
124
  position: sticky;
125
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
125
126
  z-index: 3;
126
127
  top: 0;
127
128
  border: none;
package/src/helperComponents/TableEmptyState/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  .tableEmptyStateWrapper {
4
4
  display: flex;
@@ -7,6 +7,6 @@
7
7
  justify-content: center;
8
8
 
9
9
  box-sizing: border-box;
10
- height: calc((var(--page-size, 10) * $size-table-line-height) + $size-table-line-height);
11
- padding: $dimension-3m;
10
+ height: calc((var(--page-size, 10) * styles-tokens-table.$size-table-line-height) + styles-tokens-table.$size-table-line-height);
11
+ padding: styles-tokens-table.$dimension-3m;
12
12
  }
package/src/helperComponents/TablePagination/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
2
2
 
3
3
  .footer {
4
- @include composite-var($table-footer);
4
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-footer);
5
5
 
6
6
  display: flex;
7
7
  align-items: center;