@cloud-ru/ds-markdown 1.0.27-preview-d90ac2be.0 → 1.0.27

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 (20) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/Markdown/styles.module.css +32 -32
  3. package/dist/cjs/components/MarkdownEditor/styles.module.css +40 -40
  4. package/dist/cjs/helperComponents/PrivateButton/styles.module.css +11 -11
  5. package/dist/cjs/helperComponents/TableSelectItem/styles.module.css +5 -5
  6. package/dist/cjs/helperComponents/TableSelectSettingsGrid/styles.module.css +6 -6
  7. package/dist/cjs/style.css +98 -98
  8. package/dist/cjs/styles/syntax.module.css +4 -4
  9. package/dist/esm/components/Markdown/styles.module.css +32 -32
  10. package/dist/esm/components/MarkdownEditor/styles.module.css +40 -40
  11. package/dist/esm/helperComponents/PrivateButton/styles.module.css +11 -11
  12. package/dist/esm/helperComponents/TableSelectItem/styles.module.css +5 -5
  13. package/dist/esm/helperComponents/TableSelectSettingsGrid/styles.module.css +6 -6
  14. package/dist/esm/style.css +98 -98
  15. package/dist/esm/styles/syntax.module.css +4 -4
  16. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  17. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  18. package/package.json +15 -15
  19. package/src/components/MarkdownEditor/styles.module.scss +5 -5
  20. package/src/helperComponents/PrivateButton/styles.module.scss +3 -3
package/dist/esm/style.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .root{
2
2
  box-sizing:border-box;
3
3
  max-width:100%;
4
- font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
5
- font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
6
- line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
4
+ font-family:var(--sn-brand-font-fontFamily-regular-body, "SB Sans Interface");
5
+ font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
6
+ line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)));
7
7
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
8
8
  }
9
9
  .root p,
@@ -22,42 +22,42 @@
22
22
  margin:0;
23
23
  }
24
24
  .root h1{
25
- font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
25
+ font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
26
26
  font-weight:var(--sn-regular-headline-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-l, var(--sn-brand-font-fontWeight-light-regular-headline-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
27
- line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-by40, 48px)));
28
- font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-36, 36px)));
27
+ line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-platform-comfort-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-40, 40px))));
28
+ font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-platform-comfort-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-32, 32px))));
29
29
  letter-spacing:var(--sn-regular-headline-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
30
30
  paragraph-spacing:var(--sn-regular-headline-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize32, 16px));
31
31
  }
32
32
  .root h2{
33
- font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
33
+ font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
34
34
  font-weight:var(--sn-regular-headline-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-m, var(--sn-brand-font-fontWeight-light-regular-headline-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
35
- line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-by32, 40px)));
36
- font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-32, 32px)));
35
+ line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-platform-comfort-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-36, 36px))));
36
+ font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-platform-comfort-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-28, 28px))));
37
37
  letter-spacing:var(--sn-regular-headline-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
38
38
  paragraph-spacing:var(--sn-regular-headline-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize28, 14px));
39
39
  }
40
40
  .root h3{
41
- font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
41
+ font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
42
42
  font-weight:var(--sn-regular-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-s, var(--sn-brand-font-fontWeight-light-regular-headline-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
43
- line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
44
- font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
43
+ line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
44
+ font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-platform-comfort-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px))));
45
45
  letter-spacing:var(--sn-regular-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
46
46
  paragraph-spacing:var(--sn-regular-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
47
47
  }
48
48
  .root h4{
49
- font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
49
+ font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
50
50
  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
51
- line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
52
- font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
51
+ line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-platform-comfort-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
52
+ font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-platform-comfort-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px))));
53
53
  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
54
54
  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
55
55
  }
56
56
  .root h5{
57
- font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
57
+ font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
58
58
  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
59
- line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
60
- font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
59
+ line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
60
+ font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
61
61
  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
62
62
  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
63
63
  }
@@ -78,12 +78,12 @@
78
78
  .root code{
79
79
  min-height:var(--sn-markdown-anatomy-size-syntax-inlineCode-minHeight, var(--sn-primitive-dimension-20, 20px));
80
80
  padding:0 var(--sn-markdown-anatomy-size-syntax-inlineCode-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
81
- border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
82
- font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
81
+ border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))));
82
+ font-family:var(--sn-brand-font-fontFamily-mono-body, "SB Sans Text Mono");
83
83
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
84
84
  }
85
85
  .root a{
86
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
86
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
87
87
  text-decoration:underline;
88
88
  }
89
89
  .root table{
@@ -141,8 +141,8 @@
141
141
  .root .codeBlock{
142
142
  overflow:hidden;
143
143
  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
144
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
145
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
144
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
145
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
146
146
  }
147
147
  .root .codeHeader{
148
148
  display:flex;
@@ -153,14 +153,14 @@
153
153
  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
154
154
  }
155
155
  .root .codeLang{
156
- font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
157
- font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
158
- line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
156
+ font-family:var(--sn-brand-font-fontFamily-mono-body, "SB Sans Text Mono");
157
+ font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
158
+ line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px)));
159
159
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
160
160
  text-transform:lowercase;
161
161
  }
162
162
  .root .codeCopy[data-copied]{
163
- color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
163
+ color:var(--sn-theme-color-green-text, var(--sn-brand-palette-green-40, #438b4b));
164
164
  }
165
165
  .root .codeBody{
166
166
  display:flex;
@@ -175,9 +175,9 @@
175
175
  flex-shrink:0;
176
176
  padding:var(--sn-primitive-dimension-12, 12px) 0;
177
177
  border-right:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
178
- font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
179
- font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
180
- line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
178
+ font-family:var(--sn-brand-font-fontFamily-mono-body, "SB Sans Text Mono");
179
+ font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
180
+ line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)));
181
181
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
182
182
  text-align:right;
183
183
  }
@@ -195,8 +195,8 @@
195
195
  .root .codeContent{
196
196
  min-height:0;
197
197
  padding:0;
198
- font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
199
- line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
198
+ font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
199
+ line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)));
200
200
  background:transparent;
201
201
  }
202
202
  .root hr{
@@ -219,9 +219,9 @@
219
219
  gap:var(--sn-primitive-dimension-8, 8px);
220
220
  align-items:center;
221
221
  justify-content:space-between;
222
- font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
223
- font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
224
- line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
222
+ font-family:var(--sn-brand-font-fontFamily-regular-body, "SB Sans Interface");
223
+ font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
224
+ line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px)));
225
225
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
226
226
  }
227
227
 
@@ -236,13 +236,13 @@
236
236
  }
237
237
 
238
238
  .previewToggleLabel{
239
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
239
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
240
240
  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))));
241
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
242
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
241
+ 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))));
242
+ 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))));
243
243
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
244
244
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
245
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
245
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
246
246
  }
247
247
 
248
248
  .label{
@@ -259,7 +259,7 @@
259
259
  display:flex;
260
260
  box-sizing:border-box;
261
261
  width:100%;
262
- padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
262
+ padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, 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)))));
263
263
  }
264
264
 
265
265
  .resizeBox{
@@ -278,14 +278,14 @@
278
278
 
279
279
  .postfix{
280
280
  position:absolute;
281
- top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
282
- right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
281
+ top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) + (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)))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))))) / 2);
282
+ right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, 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)))))));
283
283
  display:grid;
284
- grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
284
+ grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
285
285
  grid-template-columns:100%;
286
286
  row-gap:var(--sn-primitive-dimension-2, 2px);
287
287
  place-items:center center;
288
- width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
288
+ width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
289
289
  }
290
290
 
291
291
  .rawInputWrapper{
@@ -300,11 +300,11 @@
300
300
  flex:1 1 auto;
301
301
  min-height:0;
302
302
  padding:0;
303
- padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
303
+ padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, 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)))))));
304
304
  border:none;
305
- font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
306
- font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
307
- line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
305
+ font-family:var(--sn-brand-font-fontFamily-regular-body, "SB Sans Interface");
306
+ font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
307
+ line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)));
308
308
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
309
309
  background:transparent;
310
310
  outline:none;
@@ -320,14 +320,14 @@
320
320
  overflow-y:auto;
321
321
  flex:1 1 auto;
322
322
  min-height:0;
323
- font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
324
- font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
325
- line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
323
+ font-family:var(--sn-brand-font-fontFamily-regular-body, "SB Sans Interface");
324
+ font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
325
+ line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)));
326
326
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
327
327
  }
328
328
  .content :global(.ProseMirror){
329
329
  min-height:100%;
330
- padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
330
+ padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, 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)))))));
331
331
  outline:none;
332
332
  }
333
333
  .content :global(.ProseMirror) p,
@@ -346,42 +346,42 @@
346
346
  margin:0;
347
347
  }
348
348
  .content :global(.ProseMirror) h1{
349
- font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
349
+ font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
350
350
  font-weight:var(--sn-regular-headline-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-l, var(--sn-brand-font-fontWeight-light-regular-headline-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
351
- line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-by40, 48px)));
352
- font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-36, 36px)));
351
+ line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-platform-comfort-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-40, 40px))));
352
+ font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-platform-comfort-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-32, 32px))));
353
353
  letter-spacing:var(--sn-regular-headline-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
354
354
  paragraph-spacing:var(--sn-regular-headline-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize32, 16px));
355
355
  }
356
356
  .content :global(.ProseMirror) h2{
357
- font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
357
+ font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
358
358
  font-weight:var(--sn-regular-headline-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-m, var(--sn-brand-font-fontWeight-light-regular-headline-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
359
- line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-by32, 40px)));
360
- font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-32, 32px)));
359
+ line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-platform-comfort-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-36, 36px))));
360
+ font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-platform-comfort-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-28, 28px))));
361
361
  letter-spacing:var(--sn-regular-headline-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
362
362
  paragraph-spacing:var(--sn-regular-headline-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize28, 14px));
363
363
  }
364
364
  .content :global(.ProseMirror) h3{
365
- font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
365
+ font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
366
366
  font-weight:var(--sn-regular-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-s, var(--sn-brand-font-fontWeight-light-regular-headline-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
367
- line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
368
- font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
367
+ line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
368
+ font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-platform-comfort-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px))));
369
369
  letter-spacing:var(--sn-regular-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
370
370
  paragraph-spacing:var(--sn-regular-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
371
371
  }
372
372
  .content :global(.ProseMirror) h4{
373
- font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
373
+ font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
374
374
  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
375
- line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
376
- font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
375
+ line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-platform-comfort-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
376
+ font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-platform-comfort-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px))));
377
377
  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
378
378
  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
379
379
  }
380
380
  .content :global(.ProseMirror) h5{
381
- font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
381
+ font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
382
382
  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
383
- line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
384
- font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
383
+ line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
384
+ font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
385
385
  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
386
386
  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
387
387
  }
@@ -402,12 +402,12 @@
402
402
  .content :global(.ProseMirror) code{
403
403
  min-height:var(--sn-markdown-anatomy-size-syntax-inlineCode-minHeight, var(--sn-primitive-dimension-20, 20px));
404
404
  padding:0 var(--sn-markdown-anatomy-size-syntax-inlineCode-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
405
- border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
406
- font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
405
+ border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))));
406
+ font-family:var(--sn-brand-font-fontFamily-mono-body, "SB Sans Text Mono");
407
407
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
408
408
  }
409
409
  .content :global(.ProseMirror) a{
410
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
410
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
411
411
  text-decoration:underline;
412
412
  }
413
413
  .content :global(.ProseMirror) table{
@@ -465,8 +465,8 @@
465
465
  .content :global(.ProseMirror) pre{
466
466
  overflow-x:auto;
467
467
  padding:var(--sn-primitive-dimension-12, 12px);
468
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
469
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
468
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
469
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
470
470
  }
471
471
  .content :global(.ProseMirror) pre code{
472
472
  min-height:0;
@@ -551,12 +551,12 @@
551
551
  align-items:center;
552
552
  justify-content:center;
553
553
  box-sizing:border-box;
554
- min-width:var(--sn-button-anatomy-size-s-container-iconOnly-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
555
- height:var(--sn-button-anatomy-size-s-container-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
554
+ min-width:var(--sn-button-anatomy-size-s-container-iconOnly-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)))));
555
+ height:var(--sn-button-anatomy-size-s-container-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)))));
556
556
  padding:0;
557
557
  border:0;
558
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
559
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
558
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
559
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
560
560
  background:transparent;
561
561
  }
562
562
  .root:has(.chevron){
@@ -565,18 +565,18 @@
565
565
  }
566
566
  .root svg{
567
567
  flex:0 0 auto;
568
- stroke-width:var(--sn-density-size-icon-strokeWeight-s, 1.5px);
568
+ stroke-width:var(--sn-density-icon-strokeWeight-s, var(--sn-platform-comfort-icon-strokeWeight-s, 1.5px));
569
569
  }
570
570
  .root svg:not(.chevron){
571
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
572
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
571
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
572
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
573
573
  }
574
574
  .root:focus-visible{
575
575
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
576
576
  outline-offset:0;
577
577
  }
578
578
  .root[data-checked]{
579
- 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))));
579
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
580
580
  }
581
581
  .root[data-disabled]{
582
582
  cursor:not-allowed;
@@ -596,7 +596,7 @@
596
596
  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)));
597
597
  }
598
598
  .root .stateLayer[data-state=activatedOnBackground]{
599
- 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))));
599
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
600
600
  }
601
601
  .root .stateLayer[data-state=versionOnColor]{
602
602
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -621,7 +621,7 @@
621
621
  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)));
622
622
  }
623
623
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
624
- 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))));
624
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
625
625
  }
626
626
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
627
627
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -648,7 +648,7 @@
648
648
  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)));
649
649
  }
650
650
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
651
- 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))));
651
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
652
652
  }
653
653
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
654
654
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -691,10 +691,10 @@
691
691
  height:var(--sn-markdown-anatomy-size-tableSelect-container-item-size, var(--sn-primitive-dimension-16, 16px));
692
692
  padding:0;
693
693
  border:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px)) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
694
- border-radius:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
694
+ border-radius:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderRadius, var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))));
695
695
  }
696
696
  .root[data-checked]{
697
- border-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))));
697
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
698
698
  }
699
699
  .root .stateLayer{
700
700
  position:absolute;
@@ -710,7 +710,7 @@
710
710
  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)));
711
711
  }
712
712
  .root .stateLayer[data-state=activatedOnBackground]{
713
- 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))));
713
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
714
714
  }
715
715
  .root .stateLayer[data-state=versionOnColor]{
716
716
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -735,7 +735,7 @@
735
735
  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)));
736
736
  }
737
737
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
738
- 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))));
738
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
739
739
  }
740
740
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
741
741
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -762,7 +762,7 @@
762
762
  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)));
763
763
  }
764
764
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
765
- 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))));
765
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
766
766
  }
767
767
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
768
768
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -799,8 +799,8 @@
799
799
  }
800
800
 
801
801
  .label{
802
- font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
803
- line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
802
+ font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
803
+ line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px)));
804
804
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
805
805
  text-align:center;
806
806
  }
@@ -814,15 +814,15 @@
814
814
  box-sizing:border-box;
815
815
  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-12, 12px);
816
816
  border:none;
817
- font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
818
- font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
819
- line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
817
+ font-family:var(--sn-brand-font-fontFamily-regular-body, "SB Sans Interface");
818
+ font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
819
+ line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)));
820
820
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
821
821
  text-align:left;
822
822
  background:transparent;
823
823
  }
824
824
  .customize:hover{
825
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
825
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
826
826
  }
827
827
 
828
828
  .customizeLabel{
@@ -844,7 +844,7 @@
844
844
  .syntax :global(.hljs-built_in),
845
845
  .syntax :global(.hljs-name),
846
846
  .syntax :global(.hljs-tag){
847
- color:var(--sn-theme-color-blue-text, var(--sn-primitive-color-blue-45, #3b6fad));
847
+ color:var(--sn-theme-color-blue-text, var(--sn-brand-palette-blue-40, #3b6fad));
848
848
  }
849
849
  .syntax :global(.hljs-string),
850
850
  .syntax :global(.hljs-title),
@@ -855,7 +855,7 @@
855
855
  .syntax :global(.hljs-template-variable),
856
856
  .syntax :global(.hljs-type),
857
857
  .syntax :global(.hljs-addition){
858
- color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
858
+ color:var(--sn-theme-color-green-text, var(--sn-brand-palette-green-40, #438b4b));
859
859
  }
860
860
  .syntax :global(.hljs-number),
861
861
  .syntax :global(.hljs-symbol),
@@ -864,13 +864,13 @@
864
864
  .syntax :global(.hljs-meta),
865
865
  .syntax :global(.hljs-selector-id),
866
866
  .syntax :global(.hljs-selector-class){
867
- color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
867
+ color:var(--sn-theme-color-blue-accent, var(--sn-brand-palette-blue-50, #4387e2));
868
868
  }
869
869
  .syntax :global(.hljs-deletion),
870
870
  .syntax :global(.hljs-regexp),
871
871
  .syntax :global(.hljs-variable),
872
872
  .syntax :global(.hljs-template-variable){
873
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
873
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
874
874
  }
875
875
  .syntax :global(.hljs-emphasis){
876
876
  font-style:italic;
package/dist/esm/styles/syntax.module.css CHANGED
@@ -8,7 +8,7 @@
8
8
  .syntax :global(.hljs-built_in),
9
9
  .syntax :global(.hljs-name),
10
10
  .syntax :global(.hljs-tag){
11
- color:var(--sn-theme-color-blue-text, var(--sn-primitive-color-blue-45, #3b6fad));
11
+ color:var(--sn-theme-color-blue-text, var(--sn-brand-palette-blue-40, #3b6fad));
12
12
  }
13
13
  .syntax :global(.hljs-string),
14
14
  .syntax :global(.hljs-title),
@@ -19,7 +19,7 @@
19
19
  .syntax :global(.hljs-template-variable),
20
20
  .syntax :global(.hljs-type),
21
21
  .syntax :global(.hljs-addition){
22
- color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
22
+ color:var(--sn-theme-color-green-text, var(--sn-brand-palette-green-40, #438b4b));
23
23
  }
24
24
  .syntax :global(.hljs-number),
25
25
  .syntax :global(.hljs-symbol),
@@ -28,13 +28,13 @@
28
28
  .syntax :global(.hljs-meta),
29
29
  .syntax :global(.hljs-selector-id),
30
30
  .syntax :global(.hljs-selector-class){
31
- color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
31
+ color:var(--sn-theme-color-blue-accent, var(--sn-brand-palette-blue-50, #4387e2));
32
32
  }
33
33
  .syntax :global(.hljs-deletion),
34
34
  .syntax :global(.hljs-regexp),
35
35
  .syntax :global(.hljs-variable),
36
36
  .syntax :global(.hljs-template-variable){
37
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
37
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
38
38
  }
39
39
  .syntax :global(.hljs-emphasis){
40
40
  font-style:italic;