@foblex/m-render 3.0.5 → 4.0.1

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 (17) hide show
  1. package/assets/styles/_alert.scss +9 -4
  2. package/assets/styles/_badge.scss +27 -13
  3. package/assets/styles/_button.scss +13 -4
  4. package/assets/styles/_code-group.scss +36 -0
  5. package/assets/styles/_code-highlight.scss +16 -36
  6. package/assets/styles/_code-view.scss +213 -37
  7. package/assets/styles/_doc-text.scss +94 -69
  8. package/assets/styles/_icons.scss +4 -3
  9. package/assets/styles/_link.scss +50 -0
  10. package/assets/styles/_preview-group.scss +2 -2
  11. package/assets/styles/_table.scss +43 -31
  12. package/assets/styles/_variables.scss +313 -159
  13. package/assets/styles/styles.scss +5 -1
  14. package/fesm2022/foblex-m-render.mjs +166 -67
  15. package/fesm2022/foblex-m-render.mjs.map +1 -1
  16. package/package.json +1 -1
  17. package/types/foblex-m-render.d.ts +46 -8
package/assets/styles/_variables.scss CHANGED
@@ -11,105 +11,178 @@
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-color: #ffffff;
66
+ --page-header-background: #ffffff;
67
+ --page-navigation-background: #f9f9f9;
68
+ --page-shell-border-color: rgba(13, 13, 13, 0.08);
69
+
70
+ --gray-1: var(--gray-150);
71
+ --gray-2: var(--gray-100);
72
+ --gray-3: var(--gray-75);
73
+ --gray-soft: rgba(13, 13, 13, 0.05);
74
+
75
+ --indigo-1: var(--gray-900);
76
+ --indigo-2: var(--gray-950);
77
+ --indigo-3: var(--gray-1000);
78
+ --indigo-soft: rgba(13, 13, 13, 0.06);
79
+
80
+ --purple-1: #73581f;
81
+ --purple-2: #8e6a21;
82
+ --purple-3: #a67c26;
83
+ --purple-soft: rgba(166, 124, 38, 0.12);
84
+
85
+ --green-1: #0f7a5d;
86
+ --green-2: #0a906d;
87
+ --green-3: #08a17b;
88
+ --green-soft: rgba(8, 161, 123, 0.12);
89
+
90
+ --yellow-1: #8e5d0b;
91
+ --yellow-2: #a56a00;
92
+ --yellow-3: #be7a06;
93
+ --yellow-soft: rgba(190, 122, 6, 0.12);
94
+
95
+ --blue-200: #66b5ff;
96
+ --blue-300: #339cff;
97
+ --blue-400: #0285ff;
98
+ --blue-500: #0169cc;
99
+ --blue-600: #004f99;
100
+ --blue-800: #013566;
101
+
102
+ --red-1: #a53c3c;
103
+ --red-2: #be4a4a;
104
+ --red-3: #d25b5b;
105
+ --red-soft: rgba(210, 91, 91, 0.12);
106
+
107
+ --divider-color: var(--gray-100);
108
+ --dark-divider-color: var(--gray-150);
109
+ --gutter-color: var(--gray-100);
110
+
111
+ --neutral: var(--gray-1000);
112
+ --neutral-inverse: var(--gray-0);
113
+
114
+ --barely-visible: var(--gray-25);
115
+ --sponsor: var(--gray-700);
63
116
  }
64
117
 
65
118
  .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;
119
+ --alpha-02: rgba(255, 255, 255, 0.02);
120
+ --alpha-04: rgba(255, 255, 255, 0.04);
121
+ --alpha-06: rgba(255, 255, 255, 0.06);
122
+ --alpha-08: rgba(255, 255, 255, 0.08);
123
+ --alpha-10: rgba(255, 255, 255, 0.1);
124
+ --alpha-12: rgba(255, 255, 255, 0.12);
125
+ --alpha-15: rgba(255, 255, 255, 0.15);
126
+ --alpha-20: rgba(255, 255, 255, 0.2);
127
+ --alpha-25: rgba(255, 255, 255, 0.25);
128
+ --alpha-30: rgba(255, 255, 255, 0.3);
129
+ --alpha-40: rgba(255, 255, 255, 0.4);
130
+ --alpha-50: rgba(255, 255, 255, 0.5);
131
+
132
+ --primary-text: var(--gray-100);
133
+ --secondary-text: var(--gray-300);
134
+ --tertiary-text: var(--gray-450);
135
+
136
+ --backdrop-color: rgba(0, 0, 0, 0.58);
137
+ --background-color: var(--gray-1000);
138
+ --alt-background: var(--gray-975);
139
+ --soft-background: var(--gray-950);
140
+ --surface-glass: rgba(13, 13, 13, 0.78);
141
+ --surface-glass-strong: rgba(13, 13, 13, 0.92);
142
+ --page-background-color: #212121;
143
+ --page-header-background: #212121;
144
+ --page-navigation-background: #181818;
145
+ --page-shell-border-color: rgba(255, 255, 255, 0.08);
146
+
147
+ --gray-1: var(--gray-800);
148
+ --gray-2: var(--gray-900);
149
+ --gray-3: var(--gray-950);
150
+ --gray-soft: rgba(255, 255, 255, 0.06);
151
+
152
+ --indigo-1: var(--gray-100);
153
+ --indigo-2: var(--gray-25);
154
+ --indigo-3: var(--gray-0);
155
+ --indigo-soft: rgba(255, 255, 255, 0.08);
156
+
157
+ --purple-1: #f0d48d;
158
+ --purple-2: #d9b15a;
159
+ --purple-3: #936f2b;
160
+ --purple-soft: rgba(240, 212, 141, 0.14);
161
+
162
+ --green-1: #88dfc2;
163
+ --green-2: #54c6a0;
164
+ --green-3: #1a8f6c;
165
+ --green-soft: rgba(136, 223, 194, 0.14);
166
+
167
+ --yellow-1: #f3c97a;
168
+ --yellow-2: #d39831;
169
+ --yellow-3: #8f6012;
170
+ --yellow-soft: rgba(243, 201, 122, 0.14);
171
+
172
+ --red-1: #f0aaaa;
173
+ --red-2: #d77a7a;
174
+ --red-3: #8f3f3f;
175
+ --red-soft: rgba(240, 170, 170, 0.14);
176
+
177
+ --divider-color: var(--gray-800);
178
+ --dark-divider-color: var(--gray-700);
179
+ --gutter-color: var(--gray-700);
180
+
181
+ --neutral: var(--gray-0);
182
+ --neutral-inverse: var(--gray-1000);
183
+
184
+ --barely-visible: var(--gray-975);
185
+ --sponsor: var(--gray-250);
113
186
  }
114
187
 
115
188
  :root {
@@ -146,46 +219,63 @@
146
219
  :root {
147
220
  --font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
148
221
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
149
- --font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
222
+ --font-family-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
150
223
  'Liberation Mono', 'Courier New', monospace;
151
224
  font-optical-sizing: auto;
152
225
  }
153
226
 
154
227
  :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);
228
+ --shadow-1: 0 1px 2px rgba(13, 13, 13, 0.04), 0 6px 16px rgba(13, 13, 13, 0.04);
229
+ --shadow-2: 0 8px 24px rgba(13, 13, 13, 0.06), 0 2px 6px rgba(13, 13, 13, 0.04);
230
+ --shadow-3: 0 18px 48px rgba(13, 13, 13, 0.12), 0 6px 18px rgba(13, 13, 13, 0.08);
231
+ --shadow-4: 0 28px 72px rgba(13, 13, 13, 0.16), 0 10px 28px rgba(13, 13, 13, 0.1);
232
+ --shadow-5: 0 34px 96px rgba(13, 13, 13, 0.18), 0 14px 36px rgba(13, 13, 13, 0.12);
160
233
  }
161
234
 
162
235
  :root {
163
- --header-height: 64px;
164
- --layout-max-width: 1440px;
165
- --border-radius: 2px;
236
+ --header-height: 68px;
237
+ --layout-max-width: 1480px;
238
+ --border-radius: 14px;
166
239
  }
167
240
 
168
241
  :root {
169
- --navigation-panel-padding: 32px;
170
- --navigation-panel-width: 320px;
171
- --navigation-panel-background: var(--alt-background);
242
+ --navigation-panel-padding: 20px;
243
+ --navigation-panel-width: clamp(236px, 24vw, 252px);
244
+ --navigation-panel-background: var(--page-navigation-background);
172
245
  }
173
246
 
174
247
  :root {
175
- --not-pre-code-background: var(--gray-soft);
248
+ --not-pre-code-background: var(--alpha-04);
249
+ --not-pre-code-border-color: var(--alpha-08);
176
250
  --not-pre-code-font-size: 0.875em;
177
- --not-pre-code-color: var(--primary-1);
251
+ --not-pre-code-color: var(--primary-text);
252
+ --doc-blockquote-bar-color: var(--alpha-15);
253
+ --doc-divider-color: var(--alpha-08);
254
+ --footer-navigation-border-color: var(--alpha-08);
255
+ --footer-navigation-button-border-color: var(--alpha-10);
256
+ --footer-navigation-button-hover-border-color: var(--alpha-15);
257
+ }
258
+
259
+ .dark {
260
+ --not-pre-code-background: var(--alpha-10);
261
+ --doc-blockquote-bar-color: var(--alpha-20);
262
+ --doc-divider-color: var(--alpha-20);
263
+ --footer-navigation-border-color: var(--alpha-20);
264
+ --footer-navigation-button-border-color: var(--alpha-20);
265
+ --footer-navigation-button-hover-border-color: var(--alpha-30);
178
266
  }
179
267
 
180
268
  :root {
181
- --on-page-navigation-width: 256px;
182
- --page-padding: 32px;
269
+ --on-page-navigation-width: 212px;
270
+ --on-page-navigation-shift-desktop: 64px;
271
+ --page-padding: 24px;
272
+ --docs-content-offset-desktop: 72px;
183
273
  }
184
274
 
185
275
  :root {
186
- --f-alert-tip-background: var(--gray-soft);
276
+ --f-alert-tip-background: var(--soft-background);
187
277
  --f-alert-tip-color: var(--primary-text);
188
- --f-alert-tip-border-color: var(--primary-1);
278
+ --f-alert-tip-border-color: var(--divider-color);
189
279
 
190
280
  --f-alert-info-background: var(--primary-soft);
191
281
  --f-alert-info-color: var(--primary-text);
@@ -203,15 +293,25 @@
203
293
  --f-alert-success-color: var(--primary-text);
204
294
  --f-alert-success-border-color: var(--success-1);
205
295
 
206
- --f-alert-border-radius: var(--border-radius);
296
+ --f-alert-border-radius: calc(var(--border-radius) - 2px);
207
297
  }
208
298
 
209
299
  :root {
300
+ --f-badge-height: 22px;
301
+ --f-badge-padding-x: 6px;
302
+ --f-badge-border-radius: 4px;
303
+ --f-badge-font-size: 14px;
304
+ --f-badge-font-weight: 600;
305
+ --f-badge-letter-spacing: 0;
210
306
 
211
- --f-badge-tip-color: var(--secondary-text);
212
- --f-badge-tip-background: var(--gray-soft);
307
+ --f-badge-compact-height: 20px;
308
+ --f-badge-compact-padding-x: 5px;
309
+ --f-badge-compact-font-size: 12px;
213
310
 
214
- --f-badge-info-color: var(--primary-1);
311
+ --f-badge-tip-color: var(--primary-text);
312
+ --f-badge-tip-background: var(--alpha-08);
313
+
314
+ --f-badge-info-color: var(--primary-text);
215
315
  --f-badge-info-background: var(--primary-soft);
216
316
 
217
317
  --f-badge-warning-color: var(--warning-1);
@@ -224,79 +324,133 @@
224
324
  --f-badge-success-background: var(--success-soft);
225
325
  }
226
326
 
327
+ .dark {
328
+ --f-badge-tip-background: var(--alpha-12);
329
+ }
330
+
227
331
  :root {
228
- --code-view-not-focused-opacity: 0.5;
229
- --code-view-background: var(--alt-background);
230
- --code-view-border-radius: var(--border-radius);
332
+ --f-link-radius: 6px;
333
+ --f-link-font-weight: inherit;
334
+ --f-link-underline-offset: 0.1em;
335
+ --f-link-focus-color: var(--blue-500);
336
+ --f-link-primary-color: var(--blue-500);
337
+ --f-link-primary-hover-color: var(--blue-800);
338
+ }
231
339
 
232
- --code-view-text-color: var(--primary-text);
233
- --code-view-line-height: 1.7;
234
- --code-view-font-size: 0.875em;
340
+ .dark {
341
+ --f-link-focus-color: var(--blue-400);
342
+ --f-link-primary-color: var(--blue-300);
343
+ --f-link-primary-hover-color: var(--blue-400);
344
+ }
345
+
346
+ :root {
347
+ --code-view-not-focused-opacity: 0.45;
348
+ --code-view-background: var(--gray-25);
349
+ --code-view-border-color: var(--alpha-10);
350
+ --code-view-border-radius: 8px;
235
351
 
352
+ --code-view-text-color: var(--primary-text);
353
+ --code-view-line-height: 21px;
354
+ --code-view-font-size: 14px;
355
+ --code-view-padding-top: 14px;
356
+ --code-view-padding-right: 40px;
357
+ --code-view-padding-bottom: 14px;
358
+ --code-view-padding-left: 16px;
236
359
  --code-view-lang-color: var(--tertiary-text);
237
360
 
238
- --code-view-copy-button-background: var(--alt-background);
239
- --code-view-copy-button-hover-background: var(--background-color);
361
+ --code-view-copy-button-background: var(--background-color);
362
+ --code-view-copy-button-hover-background: var(--gray-0);
240
363
  --code-view-copy-button-border-color: var(--divider-color);
364
+
365
+ --code-syntax-1: #c0660d;
366
+ --code-syntax-2: #0169cc;
367
+ --code-syntax-3: #008635;
368
+ --code-syntax-4: #e04c91;
369
+ --code-syntax-5: #8046d9;
370
+ --code-syntax-comment: color-mix(in srgb, var(--code-view-text-color) 50%, transparent);
371
+ --code-syntax-muted: color-mix(in srgb, var(--code-view-text-color) 60%, transparent);
372
+ }
373
+
374
+ .dark {
375
+ --code-view-background: var(--gray-975);
376
+ --code-view-border-color: var(--alpha-12);
377
+ --code-view-copy-button-hover-background: var(--gray-925);
378
+ --code-syntax-1: #ffe48c;
379
+ --code-syntax-2: #66b5ff;
380
+ --code-syntax-3: #40c977;
381
+ --code-syntax-5: #ad7bf9;
241
382
  }
242
383
 
243
384
  :root {
244
- --code-group-tabs-background: var(--alt-background);
245
- --code-group-border-radius: var(--border-radius);
246
- --code-group-tabs-border-color: var(--gutter-color);
385
+ --code-group-tabs-background: var(--alpha-02);
386
+ --code-group-border-radius: var(--code-view-border-radius);
387
+ --code-group-tabs-border-color: var(--alpha-06);
247
388
 
248
389
  --code-group-tab-button-text-color: var(--secondary-text);
249
390
  --code-group-tab-button-active-text-color: var(--primary-text);
250
- --code-group-tab-button-active-border-color: var(--primary-1);
251
- --code-group-line-height: 1.7;
391
+ --code-group-tab-button-active-border-color: var(--primary-text);
252
392
  --code-group-tab-button-font-size: 14px;
253
393
  }
254
394
 
255
395
  :root {
256
- --theme-button-background: var(--gray-soft);
396
+ --theme-button-background: var(--soft-background);
257
397
  --theme-button-border-color: var(--divider-color);
258
398
  --theme-button-hovered-border-color: var(--dark-divider-color);
259
- --theme-button-icon-background: var(--neutral-inverse);
399
+ --theme-button-icon-background: var(--background-color);
400
+ --theme-button-icon-border-color: var(--divider-color);
260
401
  }
261
402
 
262
403
  :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);
404
+ --button-primary-text: var(--neutral-inverse);
405
+ --button-primary-bg: var(--neutral);
406
+ --button-primary-border: var(--neutral);
407
+ --button-primary-hover-text: var(--neutral-inverse);
408
+ --button-primary-hover-bg: var(--gray-850);
409
+ --button-primary-hover-border: var(--gray-850);
410
+ --button-primary-active-text: var(--neutral-inverse);
411
+ --button-primary-active-bg: var(--gray-800);
412
+ --button-primary-active-border: var(--gray-800);
269
413
 
270
414
  --button-default-text: var(--primary-text);
271
- --button-default-bg: var(--default-3);
415
+ --button-default-bg: var(--surface-glass-strong);
416
+ --button-default-border: var(--divider-color);
272
417
  --button-default-hover-text: var(--primary-text);
273
- --button-default-hover-bg: var(--default-2);
418
+ --button-default-hover-bg: var(--gray-0);
419
+ --button-default-hover-border: var(--dark-divider-color);
274
420
  --button-default-active-text: var(--primary-text);
275
- --button-default-active-bg: var(--default-1);
421
+ --button-default-active-bg: var(--soft-background);
422
+ --button-default-active-border: var(--dark-divider-color);
276
423
  }
277
424
 
278
- :root {
279
- --checkbox-size: 16px;
280
- --checkbox-border-radius: var(--border-radius);
281
- --checkbox-text: var(--primary-text);
282
-
283
- --checkbox-container-background: var(--default-3);
425
+ .dark {
426
+ --button-primary-hover-bg: var(--gray-25);
427
+ --button-primary-hover-border: var(--gray-25);
428
+ --button-primary-active-bg: var(--gray-50);
429
+ --button-primary-active-border: var(--gray-50);
284
430
 
285
- --checkbox-background: var(--neutral-inverse);
286
- --checkbox-checked-background: var(--neutral-inverse);
431
+ --button-default-hover-bg: var(--gray-925);
432
+ --button-default-active-bg: var(--gray-900);
433
+ }
287
434
 
288
- --checkbox-checkmark-color: var(--secondary-text);
435
+ :root {
436
+ --checkbox-size: 18px;
437
+ --checkbox-border-radius: 4px;
438
+ --checkbox-text: var(--primary-text);
439
+ --checkbox-border-color: var(--alpha-20);
440
+ --checkbox-border-color-hover: var(--alpha-30);
441
+ --checkbox-background: transparent;
442
+ --checkbox-checked-background: var(--primary-text);
443
+ --checkbox-checkmark-color: var(--neutral-inverse);
289
444
  }
290
445
 
291
446
  :root {
292
447
  --radio-button-size: 16px;
293
- --radio-button-container-border-radius: var(--border-radius);
448
+ --radio-button-container-border-radius: 999px;
294
449
  --radio-button-text: var(--primary-text);
295
- --radio-button-container-background: var(--default-3);
296
-
297
- --radio-button-border-color: var(--tertiary-text);
298
- --radio-button-background: var(--neutral-inverse);
299
- --radio-button-checked-background: var(--neutral-inverse);
300
-
301
- --radio-button-inner-circle-color: var(--secondary-text);
450
+ --radio-button-border-color: var(--alpha-20);
451
+ --radio-button-border-color-hover: var(--alpha-30);
452
+ --radio-button-background: transparent;
453
+ --radio-button-checked-background: var(--primary-text);
454
+ --radio-button-inner-circle-size: 6px;
455
+ --radio-button-inner-circle-color: var(--neutral-inverse);
302
456
  }
package/assets/styles/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "./variables";
2
+ @use "./link";
2
3
  @use "./badge";
3
4
  @use "./alert";
4
5
  @use "./button";
@@ -16,6 +17,7 @@ html {
16
17
  line-height: 1.4;
17
18
  font-size: 16px;
18
19
  -webkit-text-size-adjust: 100%;
20
+ background-color: var(--page-background-color);
19
21
 
20
22
  &.dark {
21
23
  color-scheme: dark;
@@ -32,7 +34,7 @@ body {
32
34
  font-size: 16px;
33
35
  font-weight: 400;
34
36
  color: var(--primary-text);
35
- background-color: var(--background-color);
37
+ background-color: var(--page-background-color);
36
38
  font-synthesis: style;
37
39
  text-rendering: optimizeLegibility;
38
40
  -webkit-font-smoothing: antialiased;
@@ -53,6 +55,8 @@ a {
53
55
 
54
56
  * {
55
57
  box-sizing: border-box;
58
+ scrollbar-color: var(--alpha-25) transparent;
59
+ scrollbar-width: thin;
56
60
  }
57
61
 
58
62
  .flex-space {