@cloud-ru/ds-tree 1.0.18-preview-94b5bdf7.0 → 1.0.18-preview-d50a3da1.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 (14) hide show
  1. package/dist/cjs/components/Tree/styles.module.css +6 -6
  2. package/dist/cjs/helperComponents/TreeLine/styles.module.css +3 -3
  3. package/dist/cjs/helperComponents/TreeNode/styles.module.css +91 -91
  4. package/dist/cjs/style.css +100 -100
  5. package/dist/esm/components/Tree/styles.module.css +6 -6
  6. package/dist/esm/helperComponents/TreeLine/styles.module.css +3 -3
  7. package/dist/esm/helperComponents/TreeNode/styles.module.css +91 -91
  8. package/dist/esm/style.css +100 -100
  9. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  10. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  11. package/package.json +9 -9
  12. package/src/components/Tree/styles.module.scss +1 -1
  13. package/src/helperComponents/TreeLine/styles.module.scss +1 -1
  14. package/src/helperComponents/TreeNode/styles.module.scss +5 -5
package/dist/cjs/components/Tree/styles.module.css CHANGED
@@ -4,14 +4,14 @@
4
4
  height:100%;
5
5
  }
6
6
  .tree[data-size=s]{
7
- --tree-line-width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
8
- --tree-item-gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
7
+ --tree-line-width:var(--sn-tree-anatomy-size-s-treeItem-toggleButton-maxWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
8
+ --tree-item-gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
9
9
  }
10
10
  .tree[data-size=m]{
11
- --tree-line-width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
12
- --tree-item-gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
11
+ --tree-line-width:var(--sn-tree-anatomy-size-m-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
12
+ --tree-item-gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
13
13
  }
14
14
  .tree[data-size=l]{
15
- --tree-line-width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
16
- --tree-item-gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
15
+ --tree-line-width:var(--sn-tree-anatomy-size-l-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
16
+ --tree-item-gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
17
17
  }
package/dist/cjs/helperComponents/TreeLine/styles.module.css CHANGED
@@ -2,7 +2,7 @@
2
2
  pointer-events:none;
3
3
  position:relative;
4
4
  flex-shrink:0;
5
- width:var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
5
+ width:var(--tree-line-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
6
6
  visibility:hidden;
7
7
  }
8
8
  .treeLine[data-visible]{
@@ -32,6 +32,6 @@
32
32
  width:0;
33
33
  }
34
34
  .treeLine[data-horizontal][data-half-width]::after{
35
- left:calc(0px - var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2 - var(--tree-item-gap, 0px));
36
- width:calc(var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2 + var(--tree-item-gap, 0px));
35
+ left:calc(0px - var(--tree-line-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)))) / 2 - var(--tree-item-gap, 0px));
36
+ width:calc(var(--tree-line-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)))) / 2 + var(--tree-item-gap, 0px));
37
37
  }
package/dist/cjs/helperComponents/TreeNode/styles.module.css CHANGED
@@ -62,7 +62,7 @@
62
62
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
63
63
  }
64
64
  .treeNodeContent .stateLayer[data-state=activatedOnBackground]{
65
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
65
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
66
66
  }
67
67
  .treeNodeContent .stateLayer[data-state=versionOnColor]{
68
68
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -87,7 +87,7 @@
87
87
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
88
88
  }
89
89
  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
90
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
90
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
91
91
  }
92
92
  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
93
93
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -114,7 +114,7 @@
114
114
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
115
115
  }
116
116
  .treeNodeContent[data-loading] .stateLayer[data-state=activatedOnBackground], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
117
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
117
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
118
118
  }
119
119
  .treeNodeContent[data-loading] .stateLayer[data-state=versionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
120
120
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -138,14 +138,14 @@
138
138
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
139
139
  }
140
140
  .treeNodeContent[data-droplist-active] .stateLayer[data-state=activatedOnBackground]{
141
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
141
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
142
142
  }
143
143
  .treeNodeContent:focus-visible{
144
144
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
145
145
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
146
146
  }
147
147
  .treeNodeContent[aria-selected=true]:focus-visible{
148
- outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
148
+ outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
149
149
  }
150
150
  .treeNodeContent[data-multiselect]{
151
151
  cursor:default;
@@ -181,7 +181,7 @@
181
181
  padding:0;
182
182
  border:0;
183
183
  border-radius:var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px));
184
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
184
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
185
185
  background:transparent;
186
186
  }
187
187
  .treeNodeExpandButton .treeNodeExpandButtonStateLayer{
@@ -198,7 +198,7 @@
198
198
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
199
199
  }
200
200
  .treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
201
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
201
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
202
202
  }
203
203
  .treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
204
204
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -223,7 +223,7 @@
223
223
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
224
224
  }
225
225
  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
226
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
226
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
227
227
  }
228
228
  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
229
229
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -250,7 +250,7 @@
250
250
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
251
251
  }
252
252
  .treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
253
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
253
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
254
254
  }
255
255
  .treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=versionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
256
256
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -307,7 +307,7 @@
307
307
  bottom:0;
308
308
  left:0;
309
309
  width:100%;
310
- height:calc(50% - var(--tree-chevron-size, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2);
310
+ height:calc(50% - var(--tree-chevron-size, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)))) / 2);
311
311
  }
312
312
 
313
313
  .treeNodeLink{
@@ -318,157 +318,157 @@
318
318
  }
319
319
 
320
320
  .treeNode[data-size=s]{
321
- --tree-chevron-size:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
321
+ --tree-chevron-size:var(--sn-tree-anatomy-size-s-treeItem-toggleButton-maxWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
322
322
  }
323
323
  .treeNode[data-size=s] .treeNodeContent{
324
324
  border-radius:var(--sn-tree-anatomy-size-s-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
325
- padding-top:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
326
- padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
327
- gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
328
- padding-left:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
329
- padding-right:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
330
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
325
+ padding-top:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
326
+ padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
327
+ gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
328
+ padding-left:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
329
+ padding-right:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
330
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
331
331
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
332
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
333
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
332
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
333
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
334
334
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
335
335
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
336
336
  }
337
337
  .treeNode[data-size=s] .treeNodeCheckboxWrap,
338
338
  .treeNode[data-size=s] .treeNodeExpandButtonWrapper{
339
- width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
339
+ width:var(--sn-tree-anatomy-size-s-treeItem-toggleButton-maxWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
340
340
  }
341
341
  .treeNode[data-size=s] .treeNodeIcon,
342
342
  .treeNode[data-size=s] .treeNodeCheckboxWrap{
343
- padding-top:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
344
- padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
343
+ padding-top:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
344
+ padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
345
345
  }
346
346
  .treeNode[data-size=s] .treeNodeExpandButton{
347
- width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
348
- height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
347
+ width:var(--sn-tree-anatomy-size-s-treeItem-toggleButton-maxWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
348
+ height:var(--sn-tree-anatomy-size-s-treeItem-toggleButton-maxWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
349
349
  }
350
350
  .treeNode[data-size=s] .treeNodeExpandButton > svg{
351
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
352
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
353
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
354
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
351
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
352
+ max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
353
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
354
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
355
355
  }
356
356
  .treeNode[data-size=s] .treeNodeExpandButtonSpacer{
357
- width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
358
- height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
357
+ width:var(--sn-tree-anatomy-size-s-treeItem-toggleButton-maxWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
358
+ height:var(--sn-tree-anatomy-size-s-treeItem-toggleButton-maxWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
359
359
  }
360
360
  .treeNode[data-size=s] .treeNodeIcon svg{
361
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
362
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
363
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
364
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
361
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
362
+ max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
363
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
364
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
365
365
  }
366
366
  .treeNode[data-size=s] .treeNodeActions{
367
- margin-top:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))));
368
- margin-right:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))));
369
- margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))));
367
+ margin-top:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))));
368
+ margin-right:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))));
369
+ margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))));
370
370
  }
371
371
 
372
372
  .treeNode[data-size=m]{
373
- --tree-chevron-size:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
373
+ --tree-chevron-size:var(--sn-tree-anatomy-size-m-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
374
374
  }
375
375
  .treeNode[data-size=m] .treeNodeContent{
376
- padding-top:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
377
- padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
378
- padding-left:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
379
- padding-right:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
380
- gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
376
+ padding-top:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
377
+ padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
378
+ padding-left:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
379
+ padding-right:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
380
+ gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
381
381
  border-radius:var(--sn-tree-anatomy-size-m-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
382
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
382
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
383
383
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
384
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
385
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
384
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
385
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
386
386
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
387
387
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
388
388
  }
389
389
  .treeNode[data-size=m] .treeNodeCheckboxWrap,
390
390
  .treeNode[data-size=m] .treeNodeExpandButtonWrapper{
391
- width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
391
+ width:var(--sn-tree-anatomy-size-m-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
392
392
  }
393
393
  .treeNode[data-size=m] .treeNodeIcon,
394
394
  .treeNode[data-size=m] .treeNodeCheckboxWrap{
395
- padding-top:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
396
- padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
395
+ padding-top:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
396
+ padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
397
397
  }
398
398
  .treeNode[data-size=m] .treeNodeExpandButton{
399
- width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
400
- height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
399
+ width:var(--sn-tree-anatomy-size-m-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
400
+ height:var(--sn-tree-anatomy-size-m-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
401
401
  }
402
402
  .treeNode[data-size=m] .treeNodeExpandButton > svg{
403
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
404
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
405
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
406
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
403
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
404
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
405
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
406
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
407
407
  }
408
408
  .treeNode[data-size=m] .treeNodeExpandButtonSpacer{
409
- width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
410
- height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
409
+ width:var(--sn-tree-anatomy-size-m-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
410
+ height:var(--sn-tree-anatomy-size-m-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
411
411
  }
412
412
  .treeNode[data-size=m] .treeNodeIcon svg{
413
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
414
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
415
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
416
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
413
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
414
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
415
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
416
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
417
417
  }
418
418
  .treeNode[data-size=m] .treeNodeActions{
419
- margin-top:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))));
420
- margin-right:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))));
421
- margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))));
419
+ margin-top:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
420
+ margin-right:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))));
421
+ margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
422
422
  }
423
423
 
424
424
  .treeNode[data-size=l]{
425
- --tree-chevron-size:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
425
+ --tree-chevron-size:var(--sn-tree-anatomy-size-l-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
426
426
  }
427
427
  .treeNode[data-size=l] .treeNodeContent{
428
- gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
428
+ gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
429
429
  border-radius:var(--sn-tree-anatomy-size-l-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
430
- padding-left:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
431
- padding-right:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
432
- padding-top:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
433
- padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
434
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
430
+ padding-left:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
431
+ padding-right:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
432
+ padding-top:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px)))));
433
+ padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px)))));
434
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
435
435
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
436
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
437
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
436
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
437
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
438
438
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
439
439
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
440
440
  }
441
441
  .treeNode[data-size=l] .treeNodeCheckboxWrap,
442
442
  .treeNode[data-size=l] .treeNodeExpandButtonWrapper{
443
- width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
443
+ width:var(--sn-tree-anatomy-size-l-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
444
444
  }
445
445
  .treeNode[data-size=l] .treeNodeIcon,
446
446
  .treeNode[data-size=l] .treeNodeCheckboxWrap{
447
- padding-top:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
448
- padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
447
+ padding-top:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px)))));
448
+ padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px)))));
449
449
  }
450
450
  .treeNode[data-size=l] .treeNodeExpandButton{
451
- width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
452
- height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
451
+ width:var(--sn-tree-anatomy-size-l-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
452
+ height:var(--sn-tree-anatomy-size-l-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
453
453
  }
454
454
  .treeNode[data-size=l] .treeNodeExpandButton > svg{
455
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
456
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
457
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
458
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
455
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
456
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
457
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
458
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
459
459
  }
460
460
  .treeNode[data-size=l] .treeNodeExpandButtonSpacer{
461
- width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
462
- height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
461
+ width:var(--sn-tree-anatomy-size-l-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
462
+ height:var(--sn-tree-anatomy-size-l-treeItem-toggleButton-maxWidth, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
463
463
  }
464
464
  .treeNode[data-size=l] .treeNodeIcon svg{
465
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
466
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
467
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
468
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
465
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
466
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
467
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
468
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
469
469
  }
470
470
  .treeNode[data-size=l] .treeNodeActions{
471
- margin-top:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))));
472
- margin-right:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))));
473
- margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))));
471
+ margin-top:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))));
472
+ margin-right:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px))))));
473
+ margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))));
474
474
  }