@cloud-ru/ds-tree 1.0.17 → 1.0.18-preview-a2208aeb.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 +10 -10
  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/style.css CHANGED
@@ -4,16 +4,16 @@
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
  }
18
18
  .expandableTreeNode{
19
19
  position:relative;
@@ -56,7 +56,7 @@
56
56
  pointer-events:none;
57
57
  position:relative;
58
58
  flex-shrink:0;
59
- width:var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
59
+ width:var(--tree-line-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
60
60
  visibility:hidden;
61
61
  }
62
62
  .treeLine[data-visible]{
@@ -86,8 +86,8 @@
86
86
  width:0;
87
87
  }
88
88
  .treeLine[data-horizontal][data-half-width]::after{
89
- 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));
90
- width:calc(var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2 + var(--tree-item-gap, 0px));
89
+ 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));
90
+ 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));
91
91
  }
92
92
  @charset "UTF-8";
93
93
  .treeNode{
@@ -153,7 +153,7 @@
153
153
  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)));
154
154
  }
155
155
  .treeNodeContent .stateLayer[data-state=activatedOnBackground]{
156
- 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))));
156
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
157
157
  }
158
158
  .treeNodeContent .stateLayer[data-state=versionOnColor]{
159
159
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -178,7 +178,7 @@
178
178
  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)));
179
179
  }
180
180
  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
181
- 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))));
181
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
182
182
  }
183
183
  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
184
184
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -205,7 +205,7 @@
205
205
  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)));
206
206
  }
207
207
  .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]{
208
- 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))));
208
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
209
209
  }
210
210
  .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]{
211
211
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -229,14 +229,14 @@
229
229
  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)));
230
230
  }
231
231
  .treeNodeContent[data-droplist-active] .stateLayer[data-state=activatedOnBackground]{
232
- 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))));
232
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
233
233
  }
234
234
  .treeNodeContent:focus-visible{
235
235
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
236
236
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
237
237
  }
238
238
  .treeNodeContent[aria-selected=true]:focus-visible{
239
- 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))));
239
+ outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
240
240
  }
241
241
  .treeNodeContent[data-multiselect]{
242
242
  cursor:default;
@@ -272,7 +272,7 @@
272
272
  padding:0;
273
273
  border:0;
274
274
  border-radius:var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px));
275
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
275
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
276
276
  background:transparent;
277
277
  }
278
278
  .treeNodeExpandButton .treeNodeExpandButtonStateLayer{
@@ -289,7 +289,7 @@
289
289
  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)));
290
290
  }
291
291
  .treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
292
- 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))));
292
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
293
293
  }
294
294
  .treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
295
295
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -314,7 +314,7 @@
314
314
  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)));
315
315
  }
316
316
  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
317
- 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))));
317
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
318
318
  }
319
319
  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
320
320
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -341,7 +341,7 @@
341
341
  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)));
342
342
  }
343
343
  .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]{
344
- 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))));
344
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
345
345
  }
346
346
  .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]{
347
347
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -398,7 +398,7 @@
398
398
  bottom:0;
399
399
  left:0;
400
400
  width:100%;
401
- height:calc(50% - var(--tree-chevron-size, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2);
401
+ 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);
402
402
  }
403
403
 
404
404
  .treeNodeLink{
@@ -409,157 +409,157 @@
409
409
  }
410
410
 
411
411
  .treeNode[data-size=s]{
412
- --tree-chevron-size:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
412
+ --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))));
413
413
  }
414
414
  .treeNode[data-size=s] .treeNodeContent{
415
415
  border-radius:var(--sn-tree-anatomy-size-s-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
416
- padding-top:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
417
- padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
418
- gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
419
- padding-left:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
420
- padding-right:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
421
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
416
+ 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)))));
417
+ 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)))));
418
+ 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)))));
419
+ 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)))));
420
+ 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)))));
421
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
422
422
  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))));
423
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
424
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
423
+ 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))));
424
+ 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))));
425
425
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
426
426
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
427
427
  }
428
428
  .treeNode[data-size=s] .treeNodeCheckboxWrap,
429
429
  .treeNode[data-size=s] .treeNodeExpandButtonWrapper{
430
- width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
430
+ 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))));
431
431
  }
432
432
  .treeNode[data-size=s] .treeNodeIcon,
433
433
  .treeNode[data-size=s] .treeNodeCheckboxWrap{
434
- 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)));
435
- 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)));
434
+ 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)))));
435
+ 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)))));
436
436
  }
437
437
  .treeNode[data-size=s] .treeNodeExpandButton{
438
- width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
439
- height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
438
+ 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))));
439
+ 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))));
440
440
  }
441
441
  .treeNode[data-size=s] .treeNodeExpandButton > svg{
442
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
443
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
444
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
445
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
442
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
443
+ max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
444
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
445
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
446
446
  }
447
447
  .treeNode[data-size=s] .treeNodeExpandButtonSpacer{
448
- width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
449
- height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
448
+ 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))));
449
+ 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))));
450
450
  }
451
451
  .treeNode[data-size=s] .treeNodeIcon svg{
452
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
453
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
454
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
455
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
452
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
453
+ max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
454
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
455
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
456
456
  }
457
457
  .treeNode[data-size=s] .treeNodeActions{
458
- 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))));
459
- 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))));
460
- 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))));
458
+ 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))))));
459
+ 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))))));
460
+ 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))))));
461
461
  }
462
462
 
463
463
  .treeNode[data-size=m]{
464
- --tree-chevron-size:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
464
+ --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))));
465
465
  }
466
466
  .treeNode[data-size=m] .treeNodeContent{
467
- padding-top:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
468
- padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
469
- padding-left:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
470
- padding-right:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
471
- gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
467
+ 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)))));
468
+ 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)))));
469
+ 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)))));
470
+ 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)))));
471
+ 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)))));
472
472
  border-radius:var(--sn-tree-anatomy-size-m-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
473
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
473
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
474
474
  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))));
475
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
476
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
475
+ 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))));
476
+ 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))));
477
477
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
478
478
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
479
479
  }
480
480
  .treeNode[data-size=m] .treeNodeCheckboxWrap,
481
481
  .treeNode[data-size=m] .treeNodeExpandButtonWrapper{
482
- width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
482
+ 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))));
483
483
  }
484
484
  .treeNode[data-size=m] .treeNodeIcon,
485
485
  .treeNode[data-size=m] .treeNodeCheckboxWrap{
486
- 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)));
487
- 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)));
486
+ 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)))));
487
+ 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)))));
488
488
  }
489
489
  .treeNode[data-size=m] .treeNodeExpandButton{
490
- width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
491
- height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
490
+ 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))));
491
+ 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))));
492
492
  }
493
493
  .treeNode[data-size=m] .treeNodeExpandButton > svg{
494
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
495
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
496
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
497
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
494
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
495
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
496
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
497
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
498
498
  }
499
499
  .treeNode[data-size=m] .treeNodeExpandButtonSpacer{
500
- width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
501
- height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
500
+ 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))));
501
+ 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))));
502
502
  }
503
503
  .treeNode[data-size=m] .treeNodeIcon svg{
504
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
505
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
506
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
507
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
504
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
505
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
506
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
507
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
508
508
  }
509
509
  .treeNode[data-size=m] .treeNodeActions{
510
- 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))));
511
- 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))));
512
- 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))));
510
+ 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))))));
511
+ 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))))));
512
+ 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))))));
513
513
  }
514
514
 
515
515
  .treeNode[data-size=l]{
516
- --tree-chevron-size:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
516
+ --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))));
517
517
  }
518
518
  .treeNode[data-size=l] .treeNodeContent{
519
- gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
519
+ 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)))));
520
520
  border-radius:var(--sn-tree-anatomy-size-l-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
521
- padding-left:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
522
- padding-right:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
523
- padding-top:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
524
- padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
525
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
521
+ 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)))));
522
+ 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)))));
523
+ 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)))));
524
+ 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)))));
525
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
526
526
  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))));
527
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
528
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
527
+ 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))));
528
+ 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))));
529
529
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
530
530
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
531
531
  }
532
532
  .treeNode[data-size=l] .treeNodeCheckboxWrap,
533
533
  .treeNode[data-size=l] .treeNodeExpandButtonWrapper{
534
- width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
534
+ 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))));
535
535
  }
536
536
  .treeNode[data-size=l] .treeNodeIcon,
537
537
  .treeNode[data-size=l] .treeNodeCheckboxWrap{
538
- 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)));
539
- 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)));
538
+ 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)))));
539
+ 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)))));
540
540
  }
541
541
  .treeNode[data-size=l] .treeNodeExpandButton{
542
- width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
543
- height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
542
+ 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))));
543
+ 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))));
544
544
  }
545
545
  .treeNode[data-size=l] .treeNodeExpandButton > svg{
546
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
547
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
548
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
549
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
546
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
547
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
548
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
549
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
550
550
  }
551
551
  .treeNode[data-size=l] .treeNodeExpandButtonSpacer{
552
- width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
553
- height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
552
+ 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))));
553
+ 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))));
554
554
  }
555
555
  .treeNode[data-size=l] .treeNodeIcon svg{
556
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
557
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
558
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
559
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
556
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
557
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
558
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
559
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
560
560
  }
561
561
  .treeNode[data-size=l] .treeNodeActions{
562
- 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))));
563
- 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))));
564
- 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))));
562
+ 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))))));
563
+ 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))))));
564
+ 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))))));
565
565
  }
package/dist/esm/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/esm/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
  }