@apify/docs-theme 1.0.258 → 1.0.259

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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/theme/Root.jsx +14 -0
  3. package/src/theme/custom.css +40 -114
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apify/docs-theme",
3
- "version": "1.0.258",
3
+ "version": "1.0.259",
4
4
  "description": "",
5
5
  "main": "./src/index.js",
6
6
  "files": [
@@ -21,7 +21,7 @@
21
21
  "dependencies": {
22
22
  "@apify/docs-search-modal": "^1.3.3",
23
23
  "@apify/ui-icons": "^1.19.0",
24
- "@apify/ui-library": "^1.97.2",
24
+ "@apify/ui-library": "^1.151.0",
25
25
  "@docusaurus/theme-common": "^3.7.0",
26
26
  "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
27
27
  "algoliasearch": "^5.19.0",
package/src/theme/Root.jsx ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { cssColorsVariablesBrandDark } from '@apify/ui-library';
3
+
4
+ // Only the brand dark tokens are injected - the ui-library light tokens shift
5
+ // the palette from the current design, so light mode keeps its existing colors.
6
+ // Same approach as apify-blog-theme#223.
7
+ export default function Root({ children }) {
8
+ return (
9
+ <>
10
+ <style>{`html[data-theme='dark'] { ${cssColorsVariablesBrandDark} }`}</style>
11
+ {children}
12
+ </>
13
+ );
14
+ }
package/src/theme/custom.css CHANGED
@@ -1,127 +1,41 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap');
2
2
 
3
3
  html[data-theme='dark'] {
4
- --ifm-navbar-background-color: #1a1b23;
5
- --ifm-background-color: #1a1b23;
6
- --ifm-background-surface-color: #242736;
4
+ --ifm-navbar-background-color: var(--color-neutral-background-muted);
5
+ --ifm-background-color: var(--color-neutral-background);
6
+ --ifm-background-surface-color: var(--color-neutral-background-subtle);
7
7
 
8
- --ifm-font-color-base: #f2f3fb;
8
+ --ifm-font-color-base: var(--color-neutral-text);
9
9
 
10
- --ifm-pre-background: #242736;
10
+ --ifm-pre-background: var(--color-neutral-background-subtle);
11
11
 
12
- --ifm-color-primary: #5d9df1;
13
- --ifm-link-color: #5d9df1;
14
- --ifm-heading-color: #f2f3fb;
15
- --ifm-navbar-link-color: #f2f3fb;
12
+ --ifm-color-primary: var(--color-primary-action);
13
+ --ifm-link-color: var(--color-primary-text-interactive);
14
+ --ifm-heading-color: var(--color-neutral-text);
15
+ --ifm-navbar-link-color: var(--color-neutral-text);
16
16
 
17
17
  --ifm-line-height-base: 1.65;
18
18
 
19
19
  --ifm-code-background: var(--ifm-pre-background) !important;
20
- --ifm-footer-title-color: #f2f3fb;
21
- --ifm-footer-link-color: #8d92af;
20
+ --ifm-footer-title-color: var(--color-neutral-text);
21
+ --ifm-footer-link-color: var(--color-neutral-text-muted);
22
22
 
23
23
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
24
- --docsearch-text-color: #8d92af;
25
-
26
- /* TRON colors */
27
- --color-Neutral_Text: #f3f4fa;
28
- --color-Neutral_TextMuted: #b0b8d1;
29
- --color-Neutral_Border: #d1d5e4;
30
- --color-Neutral_Hover: #2a2d39;
31
- --color-Neutral_Background: #1a1b21;
32
- --color-Neutral_BackgroundMuted: #252832;
33
- --color-Neutral_ChipBackground: #555d76;
34
- --color-Neutral_ChipBackgroundActive: #8c93a8;
35
- --color-Neutral_SeparatorSubtle: #31384d;
36
- --color-Primary_ChipText: #8ebcff;
37
- --color-Primary_ChipBackground: #1a3a78;
38
- --color-Primary_TextInteractive: #6f9dff;
39
-
40
- /* EXPERIMENT: tokens for shared components */
41
- --color-neutral-text: #f3f4fa;
42
- --color-neutral-text-muted: #b2b8cc;
43
- --color-neutral-text-subtle: #8c93a8;
44
- --color-neutral-text-disabled: #575d71;
45
- --color-neutral-text-on-primary: #1a1b21;
46
- --color-neutral-icon-on-primary: #1a1b21;
47
- --color-neutral-background: #1a1b21;
48
- --color-neutral-background-muted: #252832;
49
- --color-neutral-background-subtle: #2a2d39;
50
- --color-neutral-background-white: #f3f4fa;
51
- --color-neutral-card-background: #1e2027;
52
- --color-neutral-border: #414758;
53
- --color-neutral-separator-subtle: #343847;
54
- --color-neutral-hover: #2d313e;
55
- --color-neutral-disabled: #343847;
56
- --color-neutral-overflow: #2a2d39;
57
- --color-neutral-icon: #b2b8cc;
58
- --color-neutral-icon-subtle: #6e758a;
59
- --color-neutral-icon-disabled: #575d71;
60
- --color-neutral-field-border: #343847;
61
- --color-neutral-action-secondary: #575d71;
62
- --color-neutral-action-secondary-hover: #6e758a;
63
- --color-neutral-action-secondary-active: #343847;
64
- --color-neutral-chip-background: #575d71;
65
- --color-neutral-chip-background-hover: #6e758a;
66
- --color-neutral-chip-background-active: #8c93a8;
67
- --color-neutral-chip-background-disabled: #8c93a8;
68
- --color-neutral-large-tooltip-background: #2a2d39;
69
- --color-neutral-large-tooltip-border: #343847;
70
- --color-neutral-small-tooltip-background: #1a1b21;
71
- --color-neutral-small-tooltip-border: #252832;
72
- --color-neutral-overlay: #101114cc;
73
- --color-neutral-field-background: #101114;
74
- --color-neutral-text-placeholder: #6e758a;
75
- --color-primary-text: #6f9dff;
76
- --color-primary-text-interactive: #6f9dff;
77
- --color-primary-icon: #3970d7;
78
- --color-primary-action: #5990ff;
79
- --color-primary-action-hover: #80a9ff;
80
- --color-primary-action-active: #3970d7;
81
- --color-primary-black-action: #ffffff;
82
- --color-primary-black-action-hover: #d1d5e4;
83
- --color-primary-black-action-active: #f3f4fa;
84
- --color-primary-field-border-active: #3970d7;
85
- --color-primary-chip-background: #1a3a78;
86
- --color-primary-chip-background-hover: #194594;
87
- --color-primary-chip-text: #8ebcff;
88
- --color-primary-shadow-active: #295cbb;
89
- --color-success-text: #3bb358;
90
- --color-success-icon: #23a64a;
91
- --color-success-background-subtle: #0f2b14;
92
- --color-success-background-subtle-hover: #14441f;
93
- --color-success-background-subtle-active: #006e29;
94
- --color-success-border: #068a35;
95
- --color-success-border-subtle: #006e29;
96
- --color-success-action: #23a64a;
97
- --color-success-action-hover: #3bb358;
98
- --color-success-action-active: #068a35;
99
- --color-success-chip-background: #14441f;
100
- --color-success-chip-background-hover: #00531e;
101
- --color-success-chip-text: #6ccd7c;
102
- --color-warning-text: #f9ce4b;
103
- --color-warning-icon: #f5bc38;
104
- --color-warning-background-subtle: #3f1b07;
105
- --color-warning-border-subtle: #8a4f05;
106
- --color-warning-field-border: #cf9117;
107
- --color-warning-chip-background: #5d2e0e;
108
- --color-warning-chip-background-hover: #6d3806;
109
- --color-warning-chip-text: #f9ce4b;
110
- --color-danger-text: #ff7157;
111
- --color-danger-icon: #ef6045;
112
- --color-danger-background-subtle: #40191b;
113
- --color-danger-background-subtle-hover: #672523;
114
- --color-danger-background-subtle-active: #aa3229;
115
- --color-danger-border: #cf4436;
116
- --color-danger-border-subtle: #aa3229;
117
- --color-danger-field-border: #ef6045;
118
- --color-danger-action: #ef6045;
119
- --color-danger-action-hover: #ff7157;
120
- --color-danger-action-active: #cf4436;
121
- --color-danger-chip-background: #672523;
122
- --color-danger-chip-background-hover: #812420;
123
- --color-danger-chip-text: #fe9e8a;
124
- --button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
24
+ --docsearch-text-color: var(--color-neutral-text-muted);
25
+
26
+ /* TRON colors - map legacy names to the dark palette injected in Root.jsx */
27
+ --color-Neutral_Text: var(--color-neutral-text);
28
+ --color-Neutral_TextMuted: var(--color-neutral-text-muted);
29
+ --color-Neutral_Border: var(--color-neutral-border);
30
+ --color-Neutral_Hover: var(--color-neutral-hover);
31
+ --color-Neutral_Background: var(--color-neutral-background);
32
+ --color-Neutral_BackgroundMuted: var(--color-neutral-background-muted);
33
+ --color-Neutral_ChipBackground: var(--color-neutral-chip-background);
34
+ --color-Neutral_ChipBackgroundActive: var(--color-neutral-chip-background-active);
35
+ --color-Neutral_SeparatorSubtle: var(--color-neutral-separator-subtle);
36
+ --color-Primary_ChipText: var(--color-primary-chip-text);
37
+ --color-Primary_ChipBackground: var(--color-primary-chip-background);
38
+ --color-Primary_TextInteractive: var(--color-primary-text-interactive);
125
39
  }
126
40
 
127
41
  :root {
@@ -187,6 +101,13 @@ html[data-theme='dark'] {
187
101
  --ifm-h5-font-size: 1.4rem;
188
102
  --ifm-h6-font-size: 1.2rem;
189
103
 
104
+ /*
105
+ * Light-mode color tokens, kept identical to the original (pre-dark-mode)
106
+ * values. Do NOT replace these with the ui-library light token set - its
107
+ * palette shifts from the current design. Dark mode gets its tokens from
108
+ * cssColorsVariablesBrandDark, injected in Root.jsx.
109
+ */
110
+
190
111
  /* TRON colors */
191
112
  --color-Neutral_Text: #242836;
192
113
  --color-Neutral_TextMuted: #3f475d;
@@ -213,6 +134,7 @@ html[data-theme='dark'] {
213
134
  --color-neutral-background-subtle: #f3f4fa;
214
135
  --color-neutral-background-white: #ffffff;
215
136
  --color-neutral-card-background: #ffffff;
137
+ --color-neutral-card-background-hover: #f0f1f4;
216
138
  --color-neutral-border: #d0d5e9;
217
139
  --color-neutral-separator-subtle: #e0e3f2;
218
140
  --color-neutral-hover: #eef0f8;
@@ -472,6 +394,10 @@ footer .col {
472
394
  height: 58px;
473
395
  }
474
396
 
397
+ html[data-theme='dark'] .navbar__sub {
398
+ background: var(--color-neutral-background-muted);
399
+ }
400
+
475
401
  .navbar__container {
476
402
  max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
477
403
  display: flex;
@@ -914,12 +840,12 @@ html .plugin-docs .theme-doc-markdown h3 {
914
840
 
915
841
  html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link,
916
842
  html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .toc-highlight {
917
- color: #b3b8d2;
843
+ color: var(--color-neutral-text);
918
844
  }
919
845
 
920
846
  html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active,
921
847
  html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
922
- color: #f2f3fb;
848
+ color: var(--color-neutral-text);
923
849
  }
924
850
 
925
851
  .theme-doc-sidebar-menu .menu__link--active,