@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/helperComponents/CalendarBase/styles.module.css CHANGED
@@ -32,24 +32,24 @@
32
32
  .body[data-size=s]{
33
33
  min-width:232px;
34
34
  min-height:224px;
35
- padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
36
- padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
35
+ 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)))));
36
+ 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)))));
37
37
  width:232px;
38
38
  min-height:224px;
39
39
  }
40
40
  .body[data-size=m]{
41
41
  min-width:232px;
42
42
  min-height:224px;
43
- padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
44
- padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
43
+ 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)))));
44
+ 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)))));
45
45
  width:232px;
46
46
  min-height:224px;
47
47
  }
48
48
  .body[data-size=l]{
49
49
  min-width:296px;
50
50
  min-height:280px;
51
- padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
52
- padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
51
+ 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)))));
52
+ 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)))));
53
53
  width:296px;
54
54
  min-height:280px;
55
55
  }
package/dist/cjs/helperComponents/Item/styles.module.css CHANGED
@@ -31,7 +31,7 @@
31
31
  }
32
32
  .container[data-disabled]{
33
33
  cursor:not-allowed;
34
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
34
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
35
35
  }
36
36
  .container:focus-visible{
37
37
  outline:none;
@@ -56,7 +56,7 @@
56
56
  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)));
57
57
  }
58
58
  .container .stateLayer[data-state=activatedOnBackground]{
59
- 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))));
59
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
60
60
  }
61
61
  .container .stateLayer[data-state=versionOnColor]{
62
62
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -81,7 +81,7 @@
81
81
  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)));
82
82
  }
83
83
  .container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
84
- 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))));
84
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
85
85
  }
86
86
  .container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
87
87
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -108,7 +108,7 @@
108
108
  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)));
109
109
  }
110
110
  .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]{
111
- 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))));
111
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
112
112
  }
113
113
  .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]{
114
114
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -126,13 +126,13 @@
126
126
  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
127
127
  }
128
128
  .container:not([data-another])[data-checked]{
129
- 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))));
129
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
130
130
  }
131
131
  .container:not([data-another])[data-range-position=in]{
132
132
  background-color:transparent;
133
133
  }
134
134
  .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]{
135
- 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))));
135
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
136
136
  }
137
137
 
138
138
  .label{
@@ -157,20 +157,20 @@
157
157
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
158
158
  }
159
159
  .label:not([data-disabled], [data-another])[data-checked][data-range-position=in][data-holiday]{
160
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
160
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
161
161
  }
162
162
  .label:not([data-disabled], [data-another]):not([data-checked]){
163
163
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
164
164
  }
165
165
  .label:not([data-disabled], [data-another]):not([data-checked])[data-holiday]{
166
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
166
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
167
167
  }
168
168
  @media (hover: hover){
169
169
  .label:not([data-disabled], [data-another]):not([data-holiday]){
170
170
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
171
171
  }
172
172
  .label:not([data-disabled], [data-another])[data-holiday]{
173
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
173
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
174
174
  }
175
175
  }
176
176
 
@@ -189,22 +189,22 @@
189
189
  flex-shrink:0;
190
190
  }
191
191
  .markerLine[data-holiday]{
192
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
192
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
193
193
  }
194
194
  .markerLine[data-checked]:not([data-range-position=in]){
195
- 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))));
195
+ background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
196
196
  }
197
197
  .markerLine[data-checked][data-range-position=in]{
198
- 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))));
198
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
199
199
  }
200
200
  .markerLine[data-checked][data-range-position=in][data-holiday]{
201
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
201
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
202
202
  }
203
203
  .markerLine:not([data-checked]){
204
- 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))));
204
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
205
205
  }
206
206
  .markerLine:not([data-checked])[data-holiday]{
207
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
207
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
208
208
  }
209
209
 
210
210
  .labelWrapper{
@@ -232,8 +232,8 @@
232
232
  display:none;
233
233
  }
234
234
  .root[data-size=s]{
235
- min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
236
- min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
235
+ 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)))));
236
+ 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)))));
237
237
  }
238
238
  .root[data-size=s] .container{
239
239
  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
@@ -251,25 +251,25 @@
251
251
  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
252
252
  }
253
253
  .root[data-size=s] .labelWrapper{
254
- 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)));
255
- 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)));
254
+ 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))))));
255
+ 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))))));
256
256
  }
257
257
  .root[data-size=s] .label{
258
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
258
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
259
259
  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))));
260
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
261
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
260
+ 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))));
261
+ 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))));
262
262
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
263
263
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
264
264
  }
265
265
  .root[data-size=s] .markerLine{
266
266
  height:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
267
- border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
267
+ 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))));
268
268
  width:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-12, 12px));
269
269
  }
270
270
  .root[data-size=m]{
271
- min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
272
- min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
271
+ 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)))));
272
+ 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)))));
273
273
  }
274
274
  .root[data-size=m] .container{
275
275
  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
@@ -287,25 +287,25 @@
287
287
  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
288
288
  }
289
289
  .root[data-size=m] .labelWrapper{
290
- 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)));
291
- 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)));
290
+ 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))))));
291
+ 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))))));
292
292
  }
293
293
  .root[data-size=m] .label{
294
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
294
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
295
295
  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))));
296
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
297
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
296
+ 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))));
297
+ 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))));
298
298
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
299
299
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
300
300
  }
301
301
  .root[data-size=m] .markerLine{
302
302
  height:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
303
- border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
303
+ 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))));
304
304
  width:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-16, 16px));
305
305
  }
306
306
  .root[data-size=l]{
307
- min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
308
- min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
307
+ 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)))));
308
+ 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)))));
309
309
  }
310
310
  .root[data-size=l] .container{
311
311
  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
@@ -323,20 +323,20 @@
323
323
  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
324
324
  }
325
325
  .root[data-size=l] .labelWrapper{
326
- 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)));
327
- 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)));
326
+ 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))))));
327
+ 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))))));
328
328
  }
329
329
  .root[data-size=l] .label{
330
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
330
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
331
331
  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))));
332
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
333
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
332
+ 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))));
333
+ 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))));
334
334
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
335
335
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
336
336
  }
337
337
  .root[data-size=l] .markerLine{
338
338
  height:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
339
- border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
339
+ 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))));
340
340
  width:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-20, 20px));
341
341
  }
342
342
  @media (hover: hover){
@@ -347,12 +347,12 @@
347
347
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
348
348
  }
349
349
  .root:hover:not([data-disabled], [data-another]) .label[data-holiday]{
350
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
350
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
351
351
  }
352
352
  .root:hover:not([data-disabled], [data-another]) .markerLine:not([data-holiday]){
353
- 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))));
353
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
354
354
  }
355
355
  .root:hover:not([data-disabled], [data-another]) .markerLine[data-holiday]{
356
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
356
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
357
357
  }
358
358
  }
package/dist/cjs/helperComponents/MobileFooter/MobileFooter.js CHANGED
@@ -18,7 +18,7 @@ function MobileFooter({ onApply, onCurrent, applyDisabled }) {
18
18
  const { mode, value, dateAndTime, showSeconds, locale, getTestId } = (0, hooks_1.useCalendarContext)();
19
19
  const { t } = locale_1.calendarLocale.useTranslations();
20
20
  const selected = (0, format_1.formatSelectedValue)({ mode, value, dateAndTime, showSeconds, locale });
21
- return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [selected && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.selectedRow, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectedLabel, children: t('selected') }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectedValue, "data-test-id": getTestId(constants_1.TEST_IDS.calendarMobileSelected), children: selected })] })), (0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { break: true, primaryAction: {
21
+ return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [selected && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.selectedRow, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectedLabel, children: t('selected') }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectedValue, "data-test-id": getTestId(constants_1.TEST_IDS.calendarMobileSelected), children: selected })] })), (0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { break: true, size: button_1.SIZE.L, primaryAction: {
22
22
  label: t('apply'),
23
23
  appearance: button_1.APPEARANCE.Primary,
24
24
  view: button_1.VIEW.Filled,
package/dist/cjs/helperComponents/MobileFooter/styles.module.css CHANGED
@@ -16,10 +16,10 @@
16
16
  .selectedLabel{
17
17
  flex:1 1 auto;
18
18
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
19
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
19
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
20
20
  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))));
21
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
22
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
21
+ 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))));
22
+ 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))));
23
23
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
24
24
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
25
25
  }
@@ -29,10 +29,10 @@
29
29
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
30
30
  text-align:right;
31
31
  white-space:nowrap;
32
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
32
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
33
33
  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))));
34
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
35
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
34
+ 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))));
35
+ 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))));
36
36
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
37
37
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
38
38
  }
package/dist/cjs/helperComponents/MobilePeriodBlock/styles.module.css CHANGED
@@ -9,26 +9,26 @@
9
9
  text-align:center;
10
10
  }
11
11
  .block[data-size=s] .caption{
12
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
12
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
13
13
  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))));
14
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
15
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
14
+ 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))));
15
+ 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))));
16
16
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
17
17
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
18
18
  }
19
19
  .block[data-size=m] .caption{
20
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
20
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
21
21
  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))));
22
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
23
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
22
+ 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))));
23
+ 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))));
24
24
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
25
25
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
26
26
  }
27
27
  .block[data-size=l] .caption{
28
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
28
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
29
29
  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))));
30
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
31
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
30
+ 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))));
31
+ 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))));
32
32
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
33
33
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
34
34
  }
@@ -39,18 +39,18 @@
39
39
  .block[data-size=s] .grid{
40
40
  min-width:232px;
41
41
  min-height:224px;
42
- padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
43
- padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
42
+ 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)))));
43
+ 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)))));
44
44
  }
45
45
  .block[data-size=m] .grid{
46
46
  min-width:232px;
47
47
  min-height:224px;
48
- padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
49
- padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
48
+ 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)))));
49
+ 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)))));
50
50
  }
51
51
  .block[data-size=l] .grid{
52
52
  min-width:296px;
53
53
  min-height:280px;
54
- padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
55
- padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
54
+ 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)))));
55
+ 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)))));
56
56
  }
package/dist/cjs/helperComponents/TimeList/styles.module.css CHANGED
@@ -4,26 +4,26 @@
4
4
  text-align:center;
5
5
  }
6
6
  .label[data-size=s]{
7
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
7
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
8
8
  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))));
9
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
10
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
9
+ 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))));
10
+ 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))));
11
11
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
12
12
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
13
13
  }
14
14
  .label[data-size=m]{
15
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
15
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
16
16
  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))));
17
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
18
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
17
+ 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))));
18
+ 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))));
19
19
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
20
20
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
21
21
  }
22
22
  .label[data-size=l]{
23
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
23
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
24
24
  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))));
25
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
26
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
25
+ 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))));
26
+ 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))));
27
27
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
28
28
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
29
29
  }
package/dist/cjs/helperComponents/TimePickerBase/styles.module.css CHANGED
@@ -16,20 +16,20 @@
16
16
  .listTimeDesktop[data-size=s]{
17
17
  min-width:160px;
18
18
  height:224px;
19
- padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
20
- padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
19
+ 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)))));
20
+ 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)))));
21
21
  }
22
22
  .listTimeDesktop[data-size=m]{
23
23
  min-width:192px;
24
24
  height:224px;
25
- padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
26
- padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
25
+ 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)))));
26
+ 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)))));
27
27
  }
28
28
  .listTimeDesktop[data-size=l]{
29
29
  min-width:224px;
30
30
  height:280px;
31
- padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
32
- padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
31
+ 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)))));
32
+ 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)))));
33
33
  }
34
34
  .listTimeDesktop:not([data-fixed-width])[data-fit-to-container]{
35
35
  width:100%;
@@ -79,30 +79,30 @@
79
79
  display:flex;
80
80
  align-items:center;
81
81
  height:var(--sn-primitive-dimension-24, 24px);
82
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
82
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
83
83
  text-align:center;
84
84
  }
85
85
  .time[data-size=s]{
86
- font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
86
+ font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
87
87
  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))));
88
- line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
89
- font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
88
+ 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))));
89
+ 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))));
90
90
  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
91
91
  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
92
92
  }
93
93
  .time[data-size=m]{
94
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
94
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
95
95
  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))));
96
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
97
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
96
+ 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))));
97
+ 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))));
98
98
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
99
99
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
100
100
  }
101
101
  .time[data-size=l]{
102
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
102
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
103
103
  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))));
104
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
105
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
104
+ 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))));
105
+ 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))));
106
106
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
107
107
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
108
108
  }