@foblex/m-render 3.0.5 → 4.0.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 (15) hide show
  1. package/assets/styles/_alert.scss +9 -4
  2. package/assets/styles/_badge.scss +6 -5
  3. package/assets/styles/_button.scss +13 -4
  4. package/assets/styles/_code-group.scss +37 -0
  5. package/assets/styles/_code-highlight.scss +16 -35
  6. package/assets/styles/_code-view.scss +51 -33
  7. package/assets/styles/_doc-text.scss +27 -23
  8. package/assets/styles/_icons.scss +3 -3
  9. package/assets/styles/_table.scss +32 -11
  10. package/assets/styles/_variables.scss +224 -139
  11. package/assets/styles/styles.scss +5 -0
  12. package/fesm2022/foblex-m-render.mjs +53 -35
  13. package/fesm2022/foblex-m-render.mjs.map +1 -1
  14. package/package.json +1 -1
  15. package/types/foblex-m-render.d.ts +4 -1
package/assets/styles/_variables.scss CHANGED
@@ -11,105 +11,169 @@
11
11
  }
12
12
 
13
13
  :root {
14
- --primary-text: rgba(60, 60, 67);
15
- --secondary-text: rgba(60, 60, 67, 0.78);
16
- --tertiary-text: rgba(60, 60, 67, 0.56);
17
-
18
- --backdrop-color: rgba(0, 0, 0, 0.6);
19
- --background-color: #ffffff;
20
- --alt-background: #f6f6f7;
21
- --soft-background: #f6f6f7;
22
-
23
- --gray-1: #dddde3;
24
- --gray-2: #e4e4e9;
25
- --gray-3: #ebebef;
26
- --gray-soft: rgba(142, 150, 170, 0.14);
27
-
28
- --indigo-1: #3451b2;
29
- --indigo-2: #3a5ccc;
30
- --indigo-3: #5672cd;
31
- --indigo-soft: rgba(100, 108, 255, 0.14);
32
-
33
- --purple-1: #6f42c1;
34
- --purple-2: #7e4cc9;
35
- --purple-3: #8e5cd9;
36
- --purple-soft: rgba(159, 122, 234, 0.14);
37
-
38
- --green-1: #18794e;
39
- --green-2: #299764;
40
- --green-3: #30a46c;
41
- --green-soft: rgba(16, 185, 129, 0.14);
42
-
43
- --yellow-1: #915930;
44
- --yellow-2: #946300;
45
- --yellow-3: #9f6a00;
46
- --yellow-soft: rgba(234, 179, 8, 0.14);
47
-
48
- --red-1: #b8272c;
49
- --red-2: #d5393e;
50
- --red-3: #e0575b;
51
- --red-soft: rgba(244, 63, 94, 0.14);
52
-
53
- --divider-color: #e2e2e3;
54
- --dark-divider-color: #c2c2c4;
55
- --gutter-color: #e2e2e3;
56
-
57
- --neutral: var(--black);
58
- --neutral-inverse: var(--white);
59
-
60
- --barely-visible: #fafafa;
61
-
62
- --sponsor: #db2777;
14
+ --gray-0: #ffffff;
15
+ --gray-25: #fcfcfc;
16
+ --gray-50: #f9f9f9;
17
+ --gray-75: #f3f3f3;
18
+ --gray-100: #ededed;
19
+ --gray-150: #dfdfdf;
20
+ --gray-200: #c4c4c4;
21
+ --gray-250: #b9b9b9;
22
+ --gray-300: #afafaf;
23
+ --gray-350: #9f9f9f;
24
+ --gray-400: #8f8f8f;
25
+ --gray-450: #767676;
26
+ --gray-500: #5d5d5d;
27
+ --gray-550: #4f4f4f;
28
+ --gray-600: #414141;
29
+ --gray-650: #393939;
30
+ --gray-700: #303030;
31
+ --gray-750: #292929;
32
+ --gray-800: #212121;
33
+ --gray-850: #1c1c1c;
34
+ --gray-900: #181818;
35
+ --gray-925: #161616;
36
+ --gray-950: #131313;
37
+ --gray-975: #101010;
38
+ --gray-1000: #0d0d0d;
39
+
40
+ --alpha-02: rgba(13, 13, 13, 0.02);
41
+ --alpha-04: rgba(13, 13, 13, 0.04);
42
+ --alpha-06: rgba(13, 13, 13, 0.06);
43
+ --alpha-08: rgba(13, 13, 13, 0.08);
44
+ --alpha-10: rgba(13, 13, 13, 0.1);
45
+ --alpha-12: rgba(13, 13, 13, 0.12);
46
+ --alpha-15: rgba(13, 13, 13, 0.15);
47
+ --alpha-20: rgba(13, 13, 13, 0.2);
48
+ --alpha-25: rgba(13, 13, 13, 0.25);
49
+ --alpha-30: rgba(13, 13, 13, 0.3);
50
+ --alpha-40: rgba(13, 13, 13, 0.4);
51
+ --alpha-50: rgba(13, 13, 13, 0.5);
52
+ }
53
+
54
+ :root {
55
+ --primary-text: var(--gray-850);
56
+ --secondary-text: var(--gray-550);
57
+ --tertiary-text: var(--gray-400);
58
+
59
+ --backdrop-color: rgba(0, 0, 0, 0.48);
60
+ --background-color: var(--gray-25);
61
+ --alt-background: var(--gray-50);
62
+ --soft-background: var(--gray-75);
63
+ --surface-glass: rgba(255, 255, 255, 0.78);
64
+ --surface-glass-strong: rgba(255, 255, 255, 0.92);
65
+ --page-background-image:
66
+ radial-gradient(circle at top center, rgba(13, 13, 13, 0.05) 0%, rgba(13, 13, 13, 0) 36%),
67
+ linear-gradient(180deg, rgba(13, 13, 13, 0.018) 0%, rgba(13, 13, 13, 0) 28%);
68
+
69
+ --gray-1: var(--gray-150);
70
+ --gray-2: var(--gray-100);
71
+ --gray-3: var(--gray-75);
72
+ --gray-soft: rgba(13, 13, 13, 0.05);
73
+
74
+ --indigo-1: var(--gray-900);
75
+ --indigo-2: var(--gray-950);
76
+ --indigo-3: var(--gray-1000);
77
+ --indigo-soft: rgba(13, 13, 13, 0.06);
78
+
79
+ --purple-1: #73581f;
80
+ --purple-2: #8e6a21;
81
+ --purple-3: #a67c26;
82
+ --purple-soft: rgba(166, 124, 38, 0.12);
83
+
84
+ --green-1: #0f7a5d;
85
+ --green-2: #0a906d;
86
+ --green-3: #08a17b;
87
+ --green-soft: rgba(8, 161, 123, 0.12);
88
+
89
+ --yellow-1: #8e5d0b;
90
+ --yellow-2: #a56a00;
91
+ --yellow-3: #be7a06;
92
+ --yellow-soft: rgba(190, 122, 6, 0.12);
93
+
94
+ --red-1: #a53c3c;
95
+ --red-2: #be4a4a;
96
+ --red-3: #d25b5b;
97
+ --red-soft: rgba(210, 91, 91, 0.12);
98
+
99
+ --divider-color: var(--gray-100);
100
+ --dark-divider-color: var(--gray-150);
101
+ --gutter-color: var(--gray-100);
102
+
103
+ --neutral: var(--gray-1000);
104
+ --neutral-inverse: var(--gray-0);
105
+
106
+ --barely-visible: var(--gray-25);
107
+ --sponsor: var(--gray-700);
63
108
  }
64
109
 
65
110
  .dark {
66
- --primary-text: rgba(255, 255, 245, 0.86);
67
- --secondary-text: rgba(235, 235, 245, 0.6);
68
- --tertiary-text: rgba(235, 235, 245, 0.38);
69
-
70
- --backdrop-color: rgba(0, 0, 0, 0.6);
71
- --background-color: #1b1b1f;
72
- --alt-background: #161618;
73
- --soft-background: #202127;
74
-
75
- --gray-1: #515c67;
76
- --gray-2: #414853;
77
- --gray-3: #32363f;
78
- --gray-soft: rgba(101, 117, 133, 0.16);
79
-
80
- --indigo-1: #a8b1ff;
81
- --indigo-2: #5c73e7;
82
- --indigo-3: #3e63dd;
83
- --indigo-soft: rgba(100, 108, 255, 0.16);
84
-
85
- --purple-1: #c8abfa;
86
- --purple-2: #a879e6;
87
- --purple-3: #8e5cd9;
88
- --purple-soft: rgba(159, 122, 234, 0.16);
89
-
90
- --green-1: #3dd68c;
91
- --green-2: #30a46c;
92
- --green-3: #298459;
93
- --green-soft: rgba(16, 185, 129, 0.16);
94
-
95
- --yellow-1: #f9b44e;
96
- --yellow-2: #da8b17;
97
- --yellow-3: #a46a0a;
98
- --yellow-soft: rgba(234, 179, 8, 0.16);
99
-
100
- --red-1: #f66f81;
101
- --red-2: #f14158;
102
- --red-3: #b62a3c;
103
- --red-soft: rgba(244, 63, 94, 0.16);
104
-
105
- --divider-color: #2e2e32;
106
- --dark-divider-color: #3c3f44;
107
- --gutter-color: #000000;
108
-
109
- --neutral: var(--white);
110
- --neutral-inverse: var(--black);
111
-
112
- --barely-visible: #161618;
111
+ --alpha-02: rgba(255, 255, 255, 0.02);
112
+ --alpha-04: rgba(255, 255, 255, 0.04);
113
+ --alpha-06: rgba(255, 255, 255, 0.06);
114
+ --alpha-08: rgba(255, 255, 255, 0.08);
115
+ --alpha-10: rgba(255, 255, 255, 0.1);
116
+ --alpha-12: rgba(255, 255, 255, 0.12);
117
+ --alpha-15: rgba(255, 255, 255, 0.15);
118
+ --alpha-20: rgba(255, 255, 255, 0.2);
119
+ --alpha-25: rgba(255, 255, 255, 0.25);
120
+ --alpha-30: rgba(255, 255, 255, 0.3);
121
+ --alpha-40: rgba(255, 255, 255, 0.4);
122
+ --alpha-50: rgba(255, 255, 255, 0.5);
123
+
124
+ --primary-text: var(--gray-100);
125
+ --secondary-text: var(--gray-300);
126
+ --tertiary-text: var(--gray-450);
127
+
128
+ --backdrop-color: rgba(0, 0, 0, 0.58);
129
+ --background-color: var(--gray-1000);
130
+ --alt-background: var(--gray-975);
131
+ --soft-background: var(--gray-950);
132
+ --surface-glass: rgba(13, 13, 13, 0.78);
133
+ --surface-glass-strong: rgba(13, 13, 13, 0.92);
134
+ --page-background-image:
135
+ radial-gradient(circle at top center, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 36%),
136
+ linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0) 28%);
137
+
138
+ --gray-1: var(--gray-800);
139
+ --gray-2: var(--gray-900);
140
+ --gray-3: var(--gray-950);
141
+ --gray-soft: rgba(255, 255, 255, 0.06);
142
+
143
+ --indigo-1: var(--gray-100);
144
+ --indigo-2: var(--gray-25);
145
+ --indigo-3: var(--gray-0);
146
+ --indigo-soft: rgba(255, 255, 255, 0.08);
147
+
148
+ --purple-1: #f0d48d;
149
+ --purple-2: #d9b15a;
150
+ --purple-3: #936f2b;
151
+ --purple-soft: rgba(240, 212, 141, 0.14);
152
+
153
+ --green-1: #88dfc2;
154
+ --green-2: #54c6a0;
155
+ --green-3: #1a8f6c;
156
+ --green-soft: rgba(136, 223, 194, 0.14);
157
+
158
+ --yellow-1: #f3c97a;
159
+ --yellow-2: #d39831;
160
+ --yellow-3: #8f6012;
161
+ --yellow-soft: rgba(243, 201, 122, 0.14);
162
+
163
+ --red-1: #f0aaaa;
164
+ --red-2: #d77a7a;
165
+ --red-3: #8f3f3f;
166
+ --red-soft: rgba(240, 170, 170, 0.14);
167
+
168
+ --divider-color: var(--gray-800);
169
+ --dark-divider-color: var(--gray-700);
170
+ --gutter-color: var(--gray-700);
171
+
172
+ --neutral: var(--gray-0);
173
+ --neutral-inverse: var(--gray-1000);
174
+
175
+ --barely-visible: var(--gray-975);
176
+ --sponsor: var(--gray-250);
113
177
  }
114
178
 
115
179
  :root {
@@ -146,46 +210,46 @@
146
210
  :root {
147
211
  --font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
148
212
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
149
- --font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
213
+ --font-family-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
150
214
  'Liberation Mono', 'Courier New', monospace;
151
215
  font-optical-sizing: auto;
152
216
  }
153
217
 
154
218
  :root {
155
- --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
156
- --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
157
- --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
158
- --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
159
- --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
219
+ --shadow-1: 0 1px 2px rgba(13, 13, 13, 0.04), 0 6px 16px rgba(13, 13, 13, 0.04);
220
+ --shadow-2: 0 8px 24px rgba(13, 13, 13, 0.06), 0 2px 6px rgba(13, 13, 13, 0.04);
221
+ --shadow-3: 0 18px 48px rgba(13, 13, 13, 0.12), 0 6px 18px rgba(13, 13, 13, 0.08);
222
+ --shadow-4: 0 28px 72px rgba(13, 13, 13, 0.16), 0 10px 28px rgba(13, 13, 13, 0.1);
223
+ --shadow-5: 0 34px 96px rgba(13, 13, 13, 0.18), 0 14px 36px rgba(13, 13, 13, 0.12);
160
224
  }
161
225
 
162
226
  :root {
163
- --header-height: 64px;
164
- --layout-max-width: 1440px;
165
- --border-radius: 2px;
227
+ --header-height: 68px;
228
+ --layout-max-width: 1480px;
229
+ --border-radius: 14px;
166
230
  }
167
231
 
168
232
  :root {
169
- --navigation-panel-padding: 32px;
170
- --navigation-panel-width: 320px;
171
- --navigation-panel-background: var(--alt-background);
233
+ --navigation-panel-padding: 20px;
234
+ --navigation-panel-width: clamp(236px, 24vw, 252px);
235
+ --navigation-panel-background: var(--surface-glass-strong);
172
236
  }
173
237
 
174
238
  :root {
175
- --not-pre-code-background: var(--gray-soft);
239
+ --not-pre-code-background: var(--soft-background);
176
240
  --not-pre-code-font-size: 0.875em;
177
- --not-pre-code-color: var(--primary-1);
241
+ --not-pre-code-color: var(--primary-text);
178
242
  }
179
243
 
180
244
  :root {
181
- --on-page-navigation-width: 256px;
182
- --page-padding: 32px;
245
+ --on-page-navigation-width: 236px;
246
+ --page-padding: 24px;
183
247
  }
184
248
 
185
249
  :root {
186
- --f-alert-tip-background: var(--gray-soft);
250
+ --f-alert-tip-background: var(--soft-background);
187
251
  --f-alert-tip-color: var(--primary-text);
188
- --f-alert-tip-border-color: var(--primary-1);
252
+ --f-alert-tip-border-color: var(--divider-color);
189
253
 
190
254
  --f-alert-info-background: var(--primary-soft);
191
255
  --f-alert-info-color: var(--primary-text);
@@ -203,15 +267,14 @@
203
267
  --f-alert-success-color: var(--primary-text);
204
268
  --f-alert-success-border-color: var(--success-1);
205
269
 
206
- --f-alert-border-radius: var(--border-radius);
270
+ --f-alert-border-radius: calc(var(--border-radius) - 2px);
207
271
  }
208
272
 
209
273
  :root {
210
-
211
274
  --f-badge-tip-color: var(--secondary-text);
212
- --f-badge-tip-background: var(--gray-soft);
275
+ --f-badge-tip-background: var(--soft-background);
213
276
 
214
- --f-badge-info-color: var(--primary-1);
277
+ --f-badge-info-color: var(--primary-text);
215
278
  --f-badge-info-background: var(--primary-soft);
216
279
 
217
280
  --f-badge-warning-color: var(--warning-1);
@@ -225,9 +288,10 @@
225
288
  }
226
289
 
227
290
  :root {
228
- --code-view-not-focused-opacity: 0.5;
229
- --code-view-background: var(--alt-background);
230
- --code-view-border-radius: var(--border-radius);
291
+ --code-view-not-focused-opacity: 0.45;
292
+ --code-view-background: var(--surface-glass-strong);
293
+ --code-view-border-color: var(--divider-color);
294
+ --code-view-border-radius: calc(var(--border-radius) + 2px);
231
295
 
232
296
  --code-view-text-color: var(--primary-text);
233
297
  --code-view-line-height: 1.7;
@@ -235,49 +299,70 @@
235
299
 
236
300
  --code-view-lang-color: var(--tertiary-text);
237
301
 
238
- --code-view-copy-button-background: var(--alt-background);
239
- --code-view-copy-button-hover-background: var(--background-color);
302
+ --code-view-copy-button-background: var(--background-color);
303
+ --code-view-copy-button-hover-background: var(--gray-0);
240
304
  --code-view-copy-button-border-color: var(--divider-color);
241
305
  }
242
306
 
307
+ .dark {
308
+ --code-view-copy-button-hover-background: var(--gray-925);
309
+ }
310
+
243
311
  :root {
244
- --code-group-tabs-background: var(--alt-background);
245
- --code-group-border-radius: var(--border-radius);
312
+ --code-group-tabs-background: var(--surface-glass-strong);
313
+ --code-group-border-radius: calc(var(--border-radius) + 2px);
246
314
  --code-group-tabs-border-color: var(--gutter-color);
247
315
 
248
316
  --code-group-tab-button-text-color: var(--secondary-text);
249
317
  --code-group-tab-button-active-text-color: var(--primary-text);
250
- --code-group-tab-button-active-border-color: var(--primary-1);
318
+ --code-group-tab-button-active-border-color: var(--primary-text);
251
319
  --code-group-line-height: 1.7;
252
320
  --code-group-tab-button-font-size: 14px;
253
321
  }
254
322
 
255
323
  :root {
256
- --theme-button-background: var(--gray-soft);
324
+ --theme-button-background: var(--soft-background);
257
325
  --theme-button-border-color: var(--divider-color);
258
326
  --theme-button-hovered-border-color: var(--dark-divider-color);
259
- --theme-button-icon-background: var(--neutral-inverse);
327
+ --theme-button-icon-background: var(--background-color);
328
+ --theme-button-icon-border-color: var(--divider-color);
260
329
  }
261
330
 
262
331
  :root {
263
- --button-primary-text: var(--white);
264
- --button-primary-bg: var(--primary-3);
265
- --button-primary-hover-text: var(--white);
266
- --button-primary-hover-bg: var(--primary-2);
267
- --button-primary-active-text: var(--white);
268
- --button-primary-active-bg: var(--primary-1);
332
+ --button-primary-text: var(--neutral-inverse);
333
+ --button-primary-bg: var(--neutral);
334
+ --button-primary-border: var(--neutral);
335
+ --button-primary-hover-text: var(--neutral-inverse);
336
+ --button-primary-hover-bg: var(--gray-850);
337
+ --button-primary-hover-border: var(--gray-850);
338
+ --button-primary-active-text: var(--neutral-inverse);
339
+ --button-primary-active-bg: var(--gray-800);
340
+ --button-primary-active-border: var(--gray-800);
269
341
 
270
342
  --button-default-text: var(--primary-text);
271
- --button-default-bg: var(--default-3);
343
+ --button-default-bg: var(--surface-glass-strong);
344
+ --button-default-border: var(--divider-color);
272
345
  --button-default-hover-text: var(--primary-text);
273
- --button-default-hover-bg: var(--default-2);
346
+ --button-default-hover-bg: var(--gray-0);
347
+ --button-default-hover-border: var(--dark-divider-color);
274
348
  --button-default-active-text: var(--primary-text);
275
- --button-default-active-bg: var(--default-1);
349
+ --button-default-active-bg: var(--soft-background);
350
+ --button-default-active-border: var(--dark-divider-color);
351
+ }
352
+
353
+ .dark {
354
+ --button-primary-hover-bg: var(--gray-25);
355
+ --button-primary-hover-border: var(--gray-25);
356
+ --button-primary-active-bg: var(--gray-50);
357
+ --button-primary-active-border: var(--gray-50);
358
+
359
+ --button-default-hover-bg: var(--gray-925);
360
+ --button-default-active-bg: var(--gray-900);
276
361
  }
277
362
 
278
363
  :root {
279
364
  --checkbox-size: 16px;
280
- --checkbox-border-radius: var(--border-radius);
365
+ --checkbox-border-radius: 6px;
281
366
  --checkbox-text: var(--primary-text);
282
367
 
283
368
  --checkbox-container-background: var(--default-3);
@@ -290,7 +375,7 @@
290
375
 
291
376
  :root {
292
377
  --radio-button-size: 16px;
293
- --radio-button-container-border-radius: var(--border-radius);
378
+ --radio-button-container-border-radius: 999px;
294
379
  --radio-button-text: var(--primary-text);
295
380
  --radio-button-container-background: var(--default-3);
296
381
 
package/assets/styles/styles.scss CHANGED
@@ -16,6 +16,7 @@ html {
16
16
  line-height: 1.4;
17
17
  font-size: 16px;
18
18
  -webkit-text-size-adjust: 100%;
19
+ background-color: var(--background-color);
19
20
 
20
21
  &.dark {
21
22
  color-scheme: dark;
@@ -37,6 +38,8 @@ body {
37
38
  text-rendering: optimizeLegibility;
38
39
  -webkit-font-smoothing: antialiased;
39
40
  -moz-osx-font-smoothing: grayscale;
41
+ background-image: var(--page-background-image);
42
+ background-attachment: fixed;
40
43
  }
41
44
 
42
45
  p {
@@ -53,6 +56,8 @@ a {
53
56
 
54
57
  * {
55
58
  box-sizing: border-box;
59
+ scrollbar-color: var(--alpha-25) transparent;
60
+ scrollbar-width: thin;
56
61
  }
57
62
 
58
63
  .flex-space {