@snack-uikit/table 0.24.0 → 0.25.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 (15) hide show
  1. package/CHANGELOG.md +11 -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 +14 -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 +18 -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 +22 -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,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.25.0 (2024-10-28)
7
+
8
+
9
+ ### Features
10
+
11
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
12
+
13
+
14
+
15
+
16
+
6
17
  # 0.24.0 (2024-10-28)
7
18
 
8
19
 
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.0",
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.0",
40
+ "@snack-uikit/chips": "0.18.0",
41
+ "@snack-uikit/icon-predefined": "0.7.0",
42
+ "@snack-uikit/icons": "0.24.0",
43
+ "@snack-uikit/info-block": "0.6.0",
44
+ "@snack-uikit/list": "0.20.0",
45
+ "@snack-uikit/pagination": "0.9.0",
46
+ "@snack-uikit/scroll": "0.8.0",
47
+ "@snack-uikit/skeleton": "0.5.0",
48
+ "@snack-uikit/toggles": "0.12.0",
49
+ "@snack-uikit/toolbar": "0.9.0",
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": "8499829efa0c118b704de17411ae2328a024adb5"
65
65
  }
package/src/components/Table/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
  .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
7
  z-index: 0;
@@ -14,24 +14,24 @@
14
14
  width: 100%;
15
15
  height: auto;
16
16
  max-height: calc(
17
- (var(--page-size, 10) * $size-table-line-height) + $size-table-line-height + $border-width-table * 2
17
+ (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
18
  );
19
19
 
20
- background-color: $sys-neutral-background1-level;
21
- border-color: $sys-neutral-background1-level;
20
+ background-color: styles-tokens-table.$sys-neutral-background1-level;
21
+ border-color: styles-tokens-table.$sys-neutral-background1-level;
22
22
  border-style: solid;
23
23
  }
24
24
 
25
25
  .scrollWrapper {
26
26
  &[data-outline] {
27
27
  .table {
28
- border-color: $sys-neutral-decor-default;
28
+ border-color: styles-tokens-table.$sys-neutral-decor-default;
29
29
  }
30
30
  }
31
31
  }
32
32
 
33
33
  .header {
34
- @include composite-var($table-header);
34
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-header);
35
35
 
36
36
  display: flex;
37
37
  flex-direction: column;
@@ -48,13 +48,13 @@
48
48
  .filtersWrapper {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
- gap: $dimension-1m;
51
+ gap: styles-tokens-table.$dimension-1m;
52
52
  align-items: center;
53
53
  justify-content: flex-start;
54
54
  }
55
55
 
56
56
  .skeleton {
57
- padding: 0 $dimension-1m;
57
+ padding: 0 styles-tokens-table.$dimension-1m;
58
58
  }
59
59
 
60
60
  .wrapper {
@@ -62,17 +62,17 @@
62
62
  }
63
63
 
64
64
  .scrollStub {
65
- height: calc($dimension-025m / 2);
66
- margin-top: calc($dimension-025m / -2);
65
+ height: calc(styles-tokens-table.$dimension-025m / 2);
66
+ margin-top: calc(styles-tokens-table.$dimension-025m / -2);
67
67
  background: transparent;
68
68
  }
69
69
 
70
70
  .topRowWrapper {
71
71
  position: sticky;
72
72
  z-index: 3;
73
- top: calc($size-table-line-height);
73
+ top: calc(styles-tokens-table.$size-table-line-height);
74
74
 
75
- margin-bottom: calc(-1 * $border-width-table);
75
+ margin-bottom: calc(-1 * styles-tokens-table.$border-width-table);
76
76
 
77
- border-bottom: $border-width-table solid $sys-neutral-decor-default;
77
+ border-bottom: styles-tokens-table.$border-width-table solid styles-tokens-table.$sys-neutral-decor-default;
78
78
  }
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,5 +1,5 @@
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;
@@ -10,7 +10,7 @@
10
10
  right: 0;
11
11
  transform: translateX(50%);
12
12
 
13
- width: $dimension-1m;
13
+ width: styles-tokens-table.$dimension-1m;
14
14
  height: 100%;
15
15
 
16
16
  opacity: 0;
@@ -23,10 +23,10 @@
23
23
  left: 50%;
24
24
  transform: translateX(-50%);
25
25
 
26
- width: $border-width-table;
26
+ width: styles-tokens-table.$border-width-table;
27
27
  height: 100%;
28
28
 
29
- background-color: $sys-neutral-decor-hovered;
29
+ background-color: styles-tokens-table.$sys-neutral-decor-hovered;
30
30
  }
31
31
 
32
32
  &[data-resizing] {
@@ -46,7 +46,7 @@
46
46
  width: 1px;
47
47
  height: 100%;
48
48
 
49
- background-color: $sys-neutral-decor-activated;
49
+ background-color: styles-tokens-table.$sys-neutral-decor-activated;
50
50
 
51
51
  &::after {
52
52
  content: '';
@@ -56,13 +56,13 @@
56
56
  left: 0;
57
57
  transform: translateX(-50%);
58
58
 
59
- width: calc(100% + $dimension-4m);
59
+ width: calc(100% + styles-tokens-table.$dimension-4m);
60
60
  height: 100%;
61
61
  }
62
62
  }
63
63
 
64
64
  .tableHeaderCell {
65
- @include composite-var($table-head-column);
65
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-head-column);
66
66
 
67
67
  position: relative;
68
68
 
@@ -84,10 +84,10 @@
84
84
  left: 50%;
85
85
  transform: translateX(-50%);
86
86
 
87
- width: calc(100% - $space-table-head-separator-padding * 2);
88
- height: $border-width-table;
87
+ width: calc(100% - styles-tokens-table.$space-table-head-separator-padding * 2);
88
+ height: styles-tokens-table.$border-width-table;
89
89
 
90
- background-color: $sys-neutral-decor-default;
90
+ background-color: styles-tokens-table.$sys-neutral-decor-default;
91
91
  }
92
92
 
93
93
  &:hover {
@@ -104,7 +104,7 @@
104
104
  &::after {
105
105
  left: 0;
106
106
  transform: none;
107
- width: calc(100% - $space-table-head-separator-padding);
107
+ width: calc(100% - styles-tokens-table.$space-table-head-separator-padding);
108
108
  }
109
109
  }
110
110
 
@@ -134,7 +134,7 @@
134
134
  }
135
135
 
136
136
  .tableHeaderResizeIndicator {
137
- right: calc($dimension-1m / 2);
137
+ right: calc(styles-tokens-table.$dimension-1m / 2);
138
138
  }
139
139
  }
140
140
  }
@@ -150,7 +150,7 @@
150
150
  }
151
151
 
152
152
  .tableHeaderCellName {
153
- @include composite-var($table-head-name-layout);
153
+ @include styles-tokens-table.composite-var(styles-tokens-table.$table-head-name-layout);
154
154
 
155
155
  display: inline-flex;
156
156
  align-items: center;
@@ -158,16 +158,16 @@
158
158
  box-sizing: border-box;
159
159
  min-width: 0;
160
160
 
161
- color: simple-var($sys-neutral-text-light);
161
+ color: styles-tokens-table.simple-var(styles-tokens-table.$sys-neutral-text-light);
162
162
  }
163
163
 
164
164
  .tableHeaderIcon {
165
165
  display: flex;
166
166
  box-sizing: border-box;
167
- color: simple-var($sys-neutral-text-light);
167
+ color: styles-tokens-table.simple-var(styles-tokens-table.$sys-neutral-text-light);
168
168
 
169
169
  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 */
170
+ width: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
171
+ height: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
172
172
  }
173
173
  }
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
 
@@ -32,18 +31,18 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
32
31
  box-sizing: border-box;
33
32
 
34
33
  background-color: $snack-ui-table-row-background;
35
- border-color: $sys-neutral-decor-default;
34
+ border-color: styles-tokens-table.$sys-neutral-decor-default;
36
35
 
37
36
  &::after {
38
37
  pointer-events: none;
39
38
  content: '';
40
39
 
41
40
  position: absolute;
42
- top: calc(0px - $border-width-table);
43
- bottom: calc(0px - $border-width-table);
41
+ top: calc(0px - styles-tokens-table.$border-width-table);
42
+ bottom: calc(0px - styles-tokens-table.$border-width-table);
44
43
 
45
44
  box-sizing: border-box;
46
- width: $border-width-table;
45
+ width: styles-tokens-table.$border-width-table;
47
46
  }
48
47
 
49
48
  &[data-position='left'] {
@@ -53,7 +52,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
53
52
  right: 0;
54
53
 
55
54
  /* stylelint-disable */
56
- border-right: $border-width-table solid;
55
+ border-right: styles-tokens-table.$border-width-table solid;
57
56
  border-color: inherit;
58
57
  /* stylelint-enable */
59
58
  }
@@ -67,7 +66,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
67
66
  left: 0;
68
67
 
69
68
  /* stylelint-disable */
70
- border-left: $border-width-table solid;
69
+ border-left: styles-tokens-table.$border-width-table solid;
71
70
  border-color: inherit;
72
71
  /* stylelint-enable */
73
72
  }
@@ -77,28 +76,28 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
77
76
  .bodyRow {
78
77
  &[data-disabled] {
79
78
  cursor: not-allowed;
80
- background-color: $sys-neutral-background;
79
+ background-color: styles-tokens-table.$sys-neutral-background;
81
80
 
82
81
  .rowPinnedCells {
83
- background-color: $sys-neutral-background;
82
+ background-color: styles-tokens-table.$sys-neutral-background;
84
83
  }
85
84
  }
86
85
 
87
86
  &[data-selected] {
88
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a008);
87
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
89
88
 
90
89
  .rowPinnedCells {
91
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a008);
92
- border-color: $sys-primary-decor-activated;
90
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
91
+ border-color: styles-tokens-table.$sys-primary-decor-activated;
93
92
  }
94
93
 
95
94
  &:hover, &[data-actions-opened] {
96
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
97
- border-color: $sys-primary-decor-hovered;
95
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a016);
96
+ border-color: styles-tokens-table.$sys-primary-decor-hovered;
98
97
 
99
98
  .rowPinnedCells {
100
- background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
101
- border-color: $sys-primary-decor-activated;
99
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a016);
100
+ border-color: styles-tokens-table.$sys-primary-decor-activated;
102
101
  }
103
102
  }
104
103
  }
@@ -109,11 +108,11 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
109
108
 
110
109
  &:not([data-disabled]):not([data-selected]) {
111
110
  &:hover, &[data-actions-opened] {
112
- background-color: color-with-opacity-local($sys-neutral-accent-default, $opacity-a008);
113
- border-color: $sys-neutral-decor-hovered;
111
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
112
+ border-color: styles-tokens-table.$sys-neutral-decor-hovered;
114
113
 
115
114
  .rowPinnedCells {
116
- background-color: color-with-opacity-local($sys-neutral-accent-default, $opacity-a008);
115
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
117
116
  border-color: inherit;
118
117
  }
119
118
  }
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;