@cloud-ru/ds-calendar 1.0.18 → 1.0.19-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 (25) hide show
  1. package/dist/cjs/helperComponents/CalendarBase/styles.module.css +6 -6
  2. package/dist/cjs/helperComponents/Item/styles.module.css +42 -42
  3. package/dist/cjs/helperComponents/MobileFooter/MobileFooter.js +1 -1
  4. package/dist/cjs/helperComponents/MobileFooter/styles.module.css +6 -6
  5. package/dist/cjs/helperComponents/MobilePeriodBlock/styles.module.css +15 -15
  6. package/dist/cjs/helperComponents/TimeList/styles.module.css +9 -9
  7. package/dist/cjs/helperComponents/TimePickerBase/styles.module.css +16 -16
  8. package/dist/cjs/helperComponents/TimePickerDrum/styles.module.css +50 -50
  9. package/dist/cjs/helperComponents/TimePickerDrum/utils.js +2 -4
  10. package/dist/cjs/style.css +144 -144
  11. package/dist/esm/helperComponents/CalendarBase/styles.module.css +6 -6
  12. package/dist/esm/helperComponents/Item/styles.module.css +42 -42
  13. package/dist/esm/helperComponents/MobileFooter/MobileFooter.js +2 -2
  14. package/dist/esm/helperComponents/MobileFooter/styles.module.css +6 -6
  15. package/dist/esm/helperComponents/MobilePeriodBlock/styles.module.css +15 -15
  16. package/dist/esm/helperComponents/TimeList/styles.module.css +9 -9
  17. package/dist/esm/helperComponents/TimePickerBase/styles.module.css +16 -16
  18. package/dist/esm/helperComponents/TimePickerDrum/styles.module.css +50 -50
  19. package/dist/esm/helperComponents/TimePickerDrum/utils.js +2 -4
  20. package/dist/esm/style.css +144 -144
  21. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  22. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  23. package/package.json +12 -12
  24. package/src/helperComponents/MobileFooter/MobileFooter.tsx +2 -1
  25. package/src/helperComponents/TimePickerDrum/utils.ts +2 -4
package/dist/cjs/style.css CHANGED
@@ -72,24 +72,24 @@
72
72
  .body[data-size=s]{
73
73
  min-width:232px;
74
74
  min-height:224px;
75
- padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
76
- padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
75
+ padding-left:var(--sn-calendar-anatomy-size-s-gridDate-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)))));
76
+ padding-right:var(--sn-calendar-anatomy-size-s-gridDate-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)))));
77
77
  width:232px;
78
78
  min-height:224px;
79
79
  }
80
80
  .body[data-size=m]{
81
81
  min-width:232px;
82
82
  min-height:224px;
83
- padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
84
- padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
83
+ padding-left:var(--sn-calendar-anatomy-size-m-gridDate-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)))));
84
+ padding-right:var(--sn-calendar-anatomy-size-m-gridDate-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)))));
85
85
  width:232px;
86
86
  min-height:224px;
87
87
  }
88
88
  .body[data-size=l]{
89
89
  min-width:296px;
90
90
  min-height:280px;
91
- padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
92
- padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
91
+ padding-left:var(--sn-calendar-anatomy-size-l-gridDate-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)))));
92
+ padding-right:var(--sn-calendar-anatomy-size-l-gridDate-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)))));
93
93
  width:296px;
94
94
  min-height:280px;
95
95
  }
@@ -219,7 +219,7 @@
219
219
  }
220
220
  .container[data-disabled]{
221
221
  cursor:not-allowed;
222
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
222
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
223
223
  }
224
224
  .container:focus-visible{
225
225
  outline:none;
@@ -244,7 +244,7 @@
244
244
  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)));
245
245
  }
246
246
  .container .stateLayer[data-state=activatedOnBackground]{
247
- 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))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
248
248
  }
249
249
  .container .stateLayer[data-state=versionOnColor]{
250
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -269,7 +269,7 @@
269
269
  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)));
270
270
  }
271
271
  .container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
272
- 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))));
272
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
273
273
  }
274
274
  .container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
275
275
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -296,7 +296,7 @@
296
296
  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)));
297
297
  }
298
298
  .container[data-loading] .stateLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
299
- 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))));
299
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
300
300
  }
301
301
  .container[data-loading] .stateLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
302
302
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -314,13 +314,13 @@
314
314
  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
315
315
  }
316
316
  .container:not([data-another])[data-checked]{
317
- background-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))));
317
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
318
318
  }
319
319
  .container:not([data-another])[data-range-position=in]{
320
320
  background-color:transparent;
321
321
  }
322
322
  .container[data-another][data-checked][data-range-position=start], .container[data-another][data-checked][data-range-position=end], .container[data-another][data-checked][data-range-position=start-end]{
323
- background-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))));
323
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
324
324
  }
325
325
 
326
326
  .label{
@@ -345,20 +345,20 @@
345
345
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
346
346
  }
347
347
  .label:not([data-disabled], [data-another])[data-checked][data-range-position=in][data-holiday]{
348
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
348
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
349
349
  }
350
350
  .label:not([data-disabled], [data-another]):not([data-checked]){
351
351
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
352
352
  }
353
353
  .label:not([data-disabled], [data-another]):not([data-checked])[data-holiday]{
354
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
354
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
355
355
  }
356
356
  @media (hover: hover){
357
357
  .label:not([data-disabled], [data-another]):not([data-holiday]){
358
358
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
359
359
  }
360
360
  .label:not([data-disabled], [data-another])[data-holiday]{
361
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
361
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
362
362
  }
363
363
  }
364
364
 
@@ -377,22 +377,22 @@
377
377
  flex-shrink:0;
378
378
  }
379
379
  .markerLine[data-holiday]{
380
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
380
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
381
381
  }
382
382
  .markerLine[data-checked]:not([data-range-position=in]){
383
- background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
383
+ background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
384
384
  }
385
385
  .markerLine[data-checked][data-range-position=in]{
386
- background-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))));
386
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
387
387
  }
388
388
  .markerLine[data-checked][data-range-position=in][data-holiday]{
389
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
389
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
390
390
  }
391
391
  .markerLine:not([data-checked]){
392
- background-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))));
392
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
393
393
  }
394
394
  .markerLine:not([data-checked])[data-holiday]{
395
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
395
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
396
396
  }
397
397
 
398
398
  .labelWrapper{
@@ -420,8 +420,8 @@
420
420
  display:none;
421
421
  }
422
422
  .root[data-size=s]{
423
- min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
424
- min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
423
+ min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
424
+ min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
425
425
  }
426
426
  .root[data-size=s] .container{
427
427
  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
@@ -439,25 +439,25 @@
439
439
  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
440
440
  }
441
441
  .root[data-size=s] .labelWrapper{
442
- padding-left:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
443
- padding-right:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
442
+ padding-left:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
443
+ padding-right:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
444
444
  }
445
445
  .root[data-size=s] .label{
446
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
446
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
447
447
  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))));
448
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
449
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
448
+ 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))));
449
+ 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))));
450
450
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
451
451
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
452
452
  }
453
453
  .root[data-size=s] .markerLine{
454
454
  height:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
455
- border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
455
+ border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))));
456
456
  width:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-12, 12px));
457
457
  }
458
458
  .root[data-size=m]{
459
- min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
460
- min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
459
+ min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
460
+ min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
461
461
  }
462
462
  .root[data-size=m] .container{
463
463
  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
@@ -475,25 +475,25 @@
475
475
  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
476
476
  }
477
477
  .root[data-size=m] .labelWrapper{
478
- padding-left:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
479
- padding-right:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
478
+ padding-left:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
479
+ padding-right:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
480
480
  }
481
481
  .root[data-size=m] .label{
482
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
482
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
483
483
  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))));
484
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
485
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
484
+ 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))));
485
+ 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))));
486
486
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
487
487
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
488
488
  }
489
489
  .root[data-size=m] .markerLine{
490
490
  height:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
491
- border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
491
+ border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))));
492
492
  width:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-16, 16px));
493
493
  }
494
494
  .root[data-size=l]{
495
- min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
496
- min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
495
+ min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
496
+ min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
497
497
  }
498
498
  .root[data-size=l] .container{
499
499
  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
@@ -511,20 +511,20 @@
511
511
  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
512
512
  }
513
513
  .root[data-size=l] .labelWrapper{
514
- padding-left:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
515
- padding-right:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
514
+ padding-left:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
515
+ padding-right:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
516
516
  }
517
517
  .root[data-size=l] .label{
518
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
518
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
519
519
  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))));
520
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
521
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
520
+ 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))));
521
+ 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))));
522
522
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
523
523
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
524
524
  }
525
525
  .root[data-size=l] .markerLine{
526
526
  height:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
527
- border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
527
+ border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))));
528
528
  width:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-20, 20px));
529
529
  }
530
530
  @media (hover: hover){
@@ -535,13 +535,13 @@
535
535
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
536
536
  }
537
537
  .root:hover:not([data-disabled], [data-another]) .label[data-holiday]{
538
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
538
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
539
539
  }
540
540
  .root:hover:not([data-disabled], [data-another]) .markerLine:not([data-holiday]){
541
- background-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))));
541
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
542
542
  }
543
543
  .root:hover:not([data-disabled], [data-another]) .markerLine[data-holiday]{
544
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
544
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
545
545
  }
546
546
  }
547
547
  .calendarHeader{
@@ -597,10 +597,10 @@
597
597
  .selectedLabel{
598
598
  flex:1 1 auto;
599
599
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
600
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
600
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
601
601
  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))));
602
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
603
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
602
+ 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))));
603
+ 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))));
604
604
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
605
605
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
606
606
  }
@@ -610,10 +610,10 @@
610
610
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
611
611
  text-align:right;
612
612
  white-space:nowrap;
613
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
613
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
614
614
  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))));
615
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
616
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
615
+ 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))));
616
+ 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))));
617
617
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
618
618
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
619
619
  }
@@ -628,26 +628,26 @@
628
628
  text-align:center;
629
629
  }
630
630
  .block[data-size=s] .caption{
631
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
631
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
632
632
  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))));
633
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
634
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
633
+ 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))));
634
+ 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))));
635
635
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
636
636
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
637
637
  }
638
638
  .block[data-size=m] .caption{
639
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
639
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
640
640
  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))));
641
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
642
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
641
+ 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))));
642
+ 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))));
643
643
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
644
644
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
645
645
  }
646
646
  .block[data-size=l] .caption{
647
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
647
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
648
648
  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))));
649
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
650
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
649
+ 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))));
650
+ 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))));
651
651
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
652
652
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
653
653
  }
@@ -658,20 +658,20 @@
658
658
  .block[data-size=s] .grid{
659
659
  min-width:232px;
660
660
  min-height:224px;
661
- padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
662
- padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
661
+ padding-left:var(--sn-calendar-anatomy-size-s-gridDate-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)))));
662
+ padding-right:var(--sn-calendar-anatomy-size-s-gridDate-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)))));
663
663
  }
664
664
  .block[data-size=m] .grid{
665
665
  min-width:232px;
666
666
  min-height:224px;
667
- padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
668
- padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
667
+ padding-left:var(--sn-calendar-anatomy-size-m-gridDate-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)))));
668
+ padding-right:var(--sn-calendar-anatomy-size-m-gridDate-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)))));
669
669
  }
670
670
  .block[data-size=l] .grid{
671
671
  min-width:296px;
672
672
  min-height:280px;
673
- padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
674
- padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
673
+ padding-left:var(--sn-calendar-anatomy-size-l-gridDate-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)))));
674
+ padding-right:var(--sn-calendar-anatomy-size-l-gridDate-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)))));
675
675
  }
676
676
  .scrollHost{
677
677
  width:100%;
@@ -696,26 +696,26 @@
696
696
  text-align:center;
697
697
  }
698
698
  .label[data-size=s]{
699
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
699
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
700
700
  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))));
701
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
702
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
701
+ 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))));
702
+ 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))));
703
703
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
704
704
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
705
705
  }
706
706
  .label[data-size=m]{
707
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
707
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
708
708
  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))));
709
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
710
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
709
+ 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))));
710
+ 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))));
711
711
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
712
712
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
713
713
  }
714
714
  .label[data-size=l]{
715
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
715
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
716
716
  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))));
717
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
718
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
717
+ 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))));
718
+ 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))));
719
719
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
720
720
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
721
721
  }
@@ -737,20 +737,20 @@
737
737
  .listTimeDesktop[data-size=s]{
738
738
  min-width:160px;
739
739
  height:224px;
740
- padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
741
- padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
740
+ padding-right:var(--sn-calendar-anatomy-size-s-gridDate-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)))));
741
+ padding-left:var(--sn-calendar-anatomy-size-s-gridDate-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)))));
742
742
  }
743
743
  .listTimeDesktop[data-size=m]{
744
744
  min-width:192px;
745
745
  height:224px;
746
- padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
747
- padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
746
+ padding-right:var(--sn-calendar-anatomy-size-m-gridDate-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)))));
747
+ padding-left:var(--sn-calendar-anatomy-size-m-gridDate-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)))));
748
748
  }
749
749
  .listTimeDesktop[data-size=l]{
750
750
  min-width:224px;
751
751
  height:280px;
752
- padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
753
- padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
752
+ padding-right:var(--sn-calendar-anatomy-size-l-gridDate-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)))));
753
+ padding-left:var(--sn-calendar-anatomy-size-l-gridDate-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)))));
754
754
  }
755
755
  .listTimeDesktop:not([data-fixed-width])[data-fit-to-container]{
756
756
  width:100%;
@@ -800,30 +800,30 @@
800
800
  display:flex;
801
801
  align-items:center;
802
802
  height:var(--sn-primitive-dimension-24, 24px);
803
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
803
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
804
804
  text-align:center;
805
805
  }
806
806
  .time[data-size=s]{
807
- font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
807
+ font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
808
808
  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
809
- line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
810
- font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
809
+ line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-platform-comfort-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-16, 16px))));
810
+ font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-platform-comfort-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-12, 12px))));
811
811
  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
812
812
  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
813
813
  }
814
814
  .time[data-size=m]{
815
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
815
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
816
816
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
817
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
818
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
817
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
818
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
819
819
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
820
820
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
821
821
  }
822
822
  .time[data-size=l]{
823
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
823
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
824
824
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
825
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
826
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
825
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
826
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
827
827
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
828
828
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
829
829
  }
@@ -871,26 +871,26 @@
871
871
  text-align:center;
872
872
  }
873
873
  .root[data-size=s] .dateLabel{
874
- font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
874
+ font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
875
875
  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
876
- line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
877
- font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
876
+ line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-platform-comfort-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-16, 16px))));
877
+ font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-platform-comfort-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-12, 12px))));
878
878
  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
879
879
  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
880
880
  }
881
881
  .root[data-size=m] .dateLabel{
882
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
882
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
883
883
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
884
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
885
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
884
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
885
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
886
886
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
887
887
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
888
888
  }
889
889
  .root[data-size=l] .dateLabel{
890
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
890
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
891
891
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
892
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
893
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
892
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
893
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
894
894
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
895
895
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
896
896
  }
@@ -905,26 +905,26 @@
905
905
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
906
906
  }
907
907
  .root[data-size=s] .timeMain{
908
- font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
908
+ font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, SB Sans Interface));
909
909
  font-weight:var(--sn-regular-display-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-s, var(--sn-brand-font-fontWeight-light-regular-display-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
910
- line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-by40, 48px)));
911
- font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px)));
910
+ line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-platform-comfort-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-48, 48px))));
911
+ font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-platform-comfort-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px))));
912
912
  letter-spacing:var(--sn-regular-display-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
913
913
  paragraph-spacing:var(--sn-regular-display-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize40, 20px));
914
914
  }
915
915
  .root[data-size=m] .timeMain{
916
- font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
916
+ font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, SB Sans Interface));
917
917
  font-weight:var(--sn-regular-display-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-m, var(--sn-brand-font-fontWeight-light-regular-display-m, var(--sn-primitive-font-fontWeightValue-650, 650))));
918
- line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-by48, 60px)));
919
- font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px)));
918
+ line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-platform-comfort-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-60, 60px))));
919
+ font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-platform-comfort-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px))));
920
920
  letter-spacing:var(--sn-regular-display-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
921
921
  paragraph-spacing:var(--sn-regular-display-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize48, 24px));
922
922
  }
923
923
  .root[data-size=l] .timeMain{
924
- font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
924
+ font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, SB Sans Interface));
925
925
  font-weight:var(--sn-regular-display-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-l, var(--sn-brand-font-fontWeight-light-regular-display-l, var(--sn-primitive-font-fontWeightValue-700, 700))));
926
- line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-by64, 72px)));
927
- font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-64, 64px)));
926
+ line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-platform-comfort-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-64, 64px))));
927
+ font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-platform-comfort-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-56, 56px))));
928
928
  letter-spacing:var(--sn-regular-display-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
929
929
  paragraph-spacing:var(--sn-regular-display-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize56, 28px));
930
930
  }
@@ -933,26 +933,26 @@
933
933
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
934
934
  }
935
935
  .root[data-size=s] .timeSeconds{
936
- font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
936
+ font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, SB Sans Interface));
937
937
  font-weight:var(--sn-regular-display-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-s, var(--sn-brand-font-fontWeight-light-regular-display-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
938
- line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-by40, 48px)));
939
- font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px)));
938
+ line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-platform-comfort-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-48, 48px))));
939
+ font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-platform-comfort-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px))));
940
940
  letter-spacing:var(--sn-regular-display-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
941
941
  paragraph-spacing:var(--sn-regular-display-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize40, 20px));
942
942
  }
943
943
  .root[data-size=m] .timeSeconds{
944
- font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
944
+ font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, SB Sans Interface));
945
945
  font-weight:var(--sn-regular-display-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-m, var(--sn-brand-font-fontWeight-light-regular-display-m, var(--sn-primitive-font-fontWeightValue-650, 650))));
946
- line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-by48, 60px)));
947
- font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px)));
946
+ line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-platform-comfort-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-60, 60px))));
947
+ font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-platform-comfort-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px))));
948
948
  letter-spacing:var(--sn-regular-display-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
949
949
  paragraph-spacing:var(--sn-regular-display-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize48, 24px));
950
950
  }
951
951
  .root[data-size=l] .timeSeconds{
952
- font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
952
+ font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, SB Sans Interface));
953
953
  font-weight:var(--sn-regular-display-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-l, var(--sn-brand-font-fontWeight-light-regular-display-l, var(--sn-primitive-font-fontWeightValue-700, 700))));
954
- line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-by64, 72px)));
955
- font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-64, 64px)));
954
+ line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-platform-comfort-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-64, 64px))));
955
+ font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-platform-comfort-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-56, 56px))));
956
956
  letter-spacing:var(--sn-regular-display-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
957
957
  paragraph-spacing:var(--sn-regular-display-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize56, 28px));
958
958
  }
@@ -1008,12 +1008,12 @@
1008
1008
 
1009
1009
  .wheelFadeTop{
1010
1010
  top:0;
1011
- background:linear-gradient(to bottom, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
1011
+ background:linear-gradient(to bottom, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
1012
1012
  }
1013
1013
 
1014
1014
  .wheelFadeBottom{
1015
1015
  bottom:0;
1016
- background:linear-gradient(to top, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
1016
+ background:linear-gradient(to top, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
1017
1017
  }
1018
1018
 
1019
1019
  .wheelSlotLines{
@@ -1058,24 +1058,24 @@
1058
1058
  margin:0;
1059
1059
  }
1060
1060
  .root[data-size=s] .itemCell{
1061
- min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
1062
- min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
1063
- padding-right:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
1064
- padding-left:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
1061
+ min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
1062
+ min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
1063
+ padding-right:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
1064
+ padding-left:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
1065
1065
  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
1066
1066
  }
1067
1067
  .root[data-size=m] .itemCell{
1068
- min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
1069
- min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
1070
- padding-right:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
1071
- padding-left:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
1068
+ min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
1069
+ min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
1070
+ padding-right:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
1071
+ padding-left:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
1072
1072
  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
1073
1073
  }
1074
1074
  .root[data-size=l] .itemCell{
1075
- min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
1076
- min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
1077
- padding-right:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
1078
- padding-left:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
1075
+ min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
1076
+ min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
1077
+ padding-right:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
1078
+ padding-left:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
1079
1079
  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
1080
1080
  }
1081
1081
 
@@ -1095,26 +1095,26 @@
1095
1095
  text-align:center;
1096
1096
  }
1097
1097
  .root[data-size=s] .itemCell .itemLabel{
1098
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
1098
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
1099
1099
  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))));
1100
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
1101
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
1100
+ 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))));
1101
+ 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))));
1102
1102
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1103
1103
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
1104
1104
  }
1105
1105
  .root[data-size=m] .itemCell .itemLabel{
1106
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
1106
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
1107
1107
  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))));
1108
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
1109
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
1108
+ 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))));
1109
+ 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))));
1110
1110
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1111
1111
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
1112
1112
  }
1113
1113
  .root[data-size=l] .itemCell .itemLabel{
1114
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
1114
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
1115
1115
  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))));
1116
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
1117
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
1116
+ 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))));
1117
+ 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))));
1118
1118
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1119
1119
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
1120
1120
  }