@seqera/docusaurus-theme-seqera 1.0.20-next.67 → 1.0.20-next.69

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 (7) hide show
  1. package/lib/main-styles.css +15 -36
  2. package/lib/styles/buttons.css +9 -12
  3. package/lib/theme/Homepage/index.js +11 -11
  4. package/package.json +1 -1
  5. package/src/main-styles.css +15 -36
  6. package/src/styles/buttons.css +9 -12
  7. package/src/theme/Homepage/index.tsx +11 -11
package/lib/main-styles.css CHANGED
@@ -14,22 +14,15 @@ Infima is Docusaurus's built in CSS framework.
14
14
  **/
15
15
  :root {
16
16
  /* the primary color is set to nextflow-900 because it's the most web accessible */
17
- /* --ifm-color-primary: var(--color-nextflow-900);
17
+ --ifm-color-primary: var(--color-nextflow-900);
18
18
  --ifm-color-primary-dark: var(--color-nextflow-700);
19
19
  --ifm-color-primary-darker: var(--color-nextflow-800);
20
20
  --ifm-color-primary-darkest: var(--color-nextflow-900);
21
21
  --ifm-color-primary-light: var(--color-nextflow-400);
22
22
  --ifm-color-primary-lighter: var(--color-nextflow-300);
23
23
  --ifm-color-primary-lightest: var(--color-nextflow-200);
24
- --ifm-badge-background-color: var(--color-nextflow-300); */
25
- --ifm-color-primary: var(--color-blu-600);
26
- --ifm-color-primary-dark: var(--color-blu-700);
27
- --ifm-color-primary-darker: var(--color-blu-800);
28
- --ifm-color-primary-darkest: var(--color-blu-900);
29
- --ifm-color-primary-light: var(--color-blu-400);
30
- --ifm-color-primary-lighter: var(--color-blu-300);
31
- --ifm-color-primary-lightest: var(--color-blu-200);
32
- --ifm-badge-background-color: var(--color-blu-300);
24
+ --ifm-badge-background-color: var(--color-nextflow-300);
25
+
33
26
  --ifm-navbar-sidebar-width: 100%;
34
27
  --ifm-code-font-size: 95%;
35
28
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -151,11 +144,9 @@ Infima is Docusaurus's built in CSS framework.
151
144
  --color-blu-1000: #1e2768;
152
145
  --color-blu: #4256e7;
153
146
 
154
- /* --color-primary: var(--color-nextflow-800);
155
- --color-secondary: var(--color-nextflow-500); */
156
- --color-primary: var(--color-blu-800);
157
- --color-secondary: var(--color-blu-600);
158
- --color-accent: var(--color-blu-200);
147
+ --color-primary: var(--color-nextflow-900);
148
+ --color-secondary: var(--color-nextflow-500);
149
+ --color-accent: var(--color-nextflow-200);
159
150
  --color-neutral: #3d4451;
160
151
  --color-base-100: #ffffff;
161
152
  --color-base-200: #f2f2f2;
@@ -187,20 +178,13 @@ body {
187
178
  /* Dark mode */
188
179
  [data-theme='dark'] {
189
180
  color-scheme: dark;
190
- /* --ifm-color-primary: var(--color-nextflow-300);
181
+ --ifm-color-primary: var(--color-nextflow-300);
191
182
  --ifm-color-primary-dark: var(--color-nextflow-400);
192
183
  --ifm-color-primary-darker: var(--color-nextflow-500);
193
184
  --ifm-color-primary-darkest: var(--color-nextflow-600);
194
185
  --ifm-color-primary-light: var(--color-nextflow-300);
195
186
  --ifm-color-primary-lighter: var(--color-nextflow-200);
196
- --ifm-color-primary-lightest: var(--color-nextflow-100); */
197
- --ifm-color-primary: var(--color-blu-300);
198
- --ifm-color-primary-dark: var(--color-blu-400);
199
- --ifm-color-primary-darker: var(--color-blu-500);
200
- --ifm-color-primary-darkest: var(--color-blu-600);
201
- --ifm-color-primary-light: var(--color-blu-300);
202
- --ifm-color-primary-lighter: var(--color-blu-200);
203
- --ifm-color-primary-lightest: var(--color-blu-100);
187
+ --ifm-color-primary-lightest: var(--color-nextflow-100);
204
188
  --ifm-navbar-background-color: rgb(28, 28, 30);
205
189
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
206
190
  --ifm-code-color: var(--color-red-400);
@@ -209,18 +193,15 @@ body {
209
193
  --ifm-heading-color: #e3e3e3;
210
194
 
211
195
  /* dark mode overrides */
212
- /* --color-primary: var(--color-nextflow-500);
213
- --color-secondary: var(--color-nextflow-500); */
214
- --color-primary: var(--color-blu-500);
215
- --color-secondary: var(--color-blu-500);
216
- --color-accent: var(--color-blu-300);
217
- /* --color-accent: #1fb2a5; */
196
+ --color-primary: var(--color-nextflow-500);
197
+ --color-secondary: var(--color-nextflow-500);
198
+ --color-accent: #1fb2a5;
218
199
  --color-neutral: #191d24;
219
200
  --color-base-100: rgb(28, 28, 30);
220
201
  --color-base-200: #242933;
221
202
  --color-base-300: #20252e;
222
203
 
223
- --color-info: var(--color-wave-300);
204
+ --color-info: var(--color-wave-300);
224
205
  --color-success: var(--color-nextflow-300);
225
206
  --color-warning: var(--color-multiqc-300);
226
207
  --color-error: var(--color-fusion-300);
@@ -350,7 +331,7 @@ body {
350
331
  --color-brand-1200: #151121;
351
332
  --color-brand-1300: #141024;
352
333
  --color-brand-1400: #110d1d;
353
- --color-brand: #160f26;
334
+ --color-brand: #201637;
354
335
 
355
336
  /* Gray Colors */
356
337
  --color-gray-100: #f7f7f7;
@@ -389,10 +370,8 @@ body {
389
370
  --color-blu-1000: #1e2768;
390
371
  --color-blu: #4256e7;
391
372
 
392
- /* --color-primary: var(--color-nextflow-800);
393
- --color-secondary: var(--color-nextflow-500); */
394
- --color-primary: var(--color-blu-600);
395
- --color-secondary: var(--color-blu-500);
373
+ --color-primary: var(--color-nextflow-900);
374
+ --color-secondary: var(--color-nextflow-500);
396
375
  --color-accent: #f59e0b;
397
376
  --color-neutral: #3d4451;
398
377
  --color-base-100: #ffffff;
package/lib/styles/buttons.css CHANGED
@@ -1,11 +1,9 @@
1
1
  .btn {
2
2
  border-radius: 4px;
3
3
  transition: all 0.3s;
4
- /* background: var(--color-nextflow-500);
5
- border: 1px solid var(--color-nextflow-700); */
6
- color: white;
7
- background: var(--color-blu);
8
- border: 1px solid var(--color-blu);
4
+ color: black;
5
+ background: var(--color-nextflow-500);
6
+ border: 1px solid var(--color-nextflow-700);
9
7
  font-weight: 500;
10
8
  font-size: 0.9rem;
11
9
  text-align: center;
@@ -13,8 +11,8 @@
13
11
  width: auto;
14
12
  text-decoration: none !important;
15
13
  &:hover {
16
- /* background: var(--color-nextflow-600); */
17
- background: var(--color-blu-700);
14
+ background: var(--color-nextflow-700);
15
+
18
16
  }
19
17
  }
20
18
 
@@ -31,12 +29,11 @@
31
29
  [data-theme='dark'] {
32
30
  .btn {
33
31
  color: black;
34
- background: var(--color-blu-400);
35
- border: 1px solid var(--color-blu-400);
32
+ background: var(--color-nextflow-400);
33
+ border: 1px solid var(--color-nextflow-400);
36
34
  &:hover {
37
- /* background: var(--color-nextflow-600); */
38
- background: var(--color-blu-700);
39
- border: 1px solid var(--color-blu-700);
35
+ background: var(--color-nextflow-600);
36
+ border: 1px solid var(--color-nextflow-700);
40
37
  }
41
38
  }
42
39
  .btn-outline {
package/lib/theme/Homepage/index.js CHANGED
@@ -14,21 +14,21 @@ const CARD_DATA = {
14
14
  platform: [
15
15
  {
16
16
  href: '/platform-cloud/',
17
- icon: <IconSeqeraCloud className="text-black" />,
17
+ icon: <IconSeqeraCloud className="text-brand dark:text-white" />,
18
18
  title: 'Seqera Cloud',
19
19
  description:
20
20
  'Comprehensive platform empowering teams across the entire scientific lifecycle',
21
21
  },
22
22
  {
23
23
  href: '/platform-enterprise/',
24
- icon: <IconSeqeraEnterprise className="text-black" />,
24
+ icon: <IconSeqeraEnterprise className="text-brand dark:text-white" />,
25
25
  title: 'Seqera Enterprise',
26
26
  description:
27
27
  'Platform management within your own infrastructure for greater control',
28
28
  },
29
29
  {
30
30
  href: '/fusion/',
31
- icon: <IconFusion className="text-fusion-600" />,
31
+ icon: <IconFusion className="text-brand dark:text-white" />,
32
32
  title: 'Fusion',
33
33
  description: 'Optimized file system for cloud-native data pipelines',
34
34
  },
@@ -36,14 +36,14 @@ const CARD_DATA = {
36
36
  ai: [
37
37
  {
38
38
  href: '/platform-cloud/seqera-ai/',
39
- icon: <IconAI className="text-black max-w-5.5" />,
39
+ icon: <IconAI className="text-brand max-w-5.5" />,
40
40
  title: 'Seqera AI',
41
41
  description:
42
42
  'Intelligent command-line assistant that helps you build, run, and manage bioinformatics workflows',
43
43
  },
44
44
  {
45
45
  href: '/platform-cloud/seqera-mcp/',
46
- icon: <IconMCP className="text-black max-w-5.5" />,
46
+ icon: <IconMCP className="text-brand max-w-5.5" />,
47
47
  title: 'Seqera MCP',
48
48
  description: 'AI assistant that interacts with the Seqera ecosystem',
49
49
  },
@@ -51,19 +51,19 @@ const CARD_DATA = {
51
51
  openSource: [
52
52
  {
53
53
  href: '/nextflow/',
54
- icon: <IconNextflow className="text-nextflow-600" />,
54
+ icon: <IconNextflow className="text-brand dark:text-white" />,
55
55
  title: 'Nextflow',
56
56
  description: 'Open-source orchestrator for deploying workflows',
57
57
  },
58
58
  {
59
59
  href: '/wave/',
60
- icon: <IconWave className="text-wave-600" />,
60
+ icon: <IconWave className="text-brand dark:text-white" />,
61
61
  title: 'Wave',
62
62
  description: 'Next-generation container provisioning for data analysis',
63
63
  },
64
64
  {
65
65
  href: '/multiqc/',
66
- icon: <IconMultiQC className="text-multiqc-600" />,
66
+ icon: <IconMultiQC className="text-brand dark:text-white" />,
67
67
  title: 'MultiQC',
68
68
  description:
69
69
  'Open-source tool to aggregate bioinformatic analyses results',
@@ -72,20 +72,20 @@ const CARD_DATA = {
72
72
  help: [
73
73
  {
74
74
  href: 'https://support.seqera.io/',
75
- icon: <IconQuestionMark className="text-black" />,
75
+ icon: <IconQuestionMark className="text-brand" />,
76
76
  title: 'Support Portal',
77
77
  description:
78
78
  'Contact support for help with your platform or enterprise account',
79
79
  },
80
80
  {
81
81
  href: 'https://community.seqera.io/',
82
- icon: <IconChatBubbles className="text-black" />,
82
+ icon: <IconChatBubbles className="text-brand" />,
83
83
  title: 'Community Forum',
84
84
  description: 'Discuss, share and network with other users',
85
85
  },
86
86
  {
87
87
  href: 'https://status.seqera.io/',
88
- icon: <IconServiceStatus className="text-black" />,
88
+ icon: <IconServiceStatus className="text-brand" />,
89
89
  title: 'Service Status',
90
90
  description: 'Monitor platform performance in real time',
91
91
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seqera/docusaurus-theme-seqera",
3
- "version": "1.0.20-next.67",
3
+ "version": "1.0.20-next.69",
4
4
  "description": "Seqera docs theme for Docusaurus",
5
5
  "author": "Seqera docs team <education@seqera.io>",
6
6
  "license": "Apache-2.0",
package/src/main-styles.css CHANGED
@@ -14,22 +14,15 @@ Infima is Docusaurus's built in CSS framework.
14
14
  **/
15
15
  :root {
16
16
  /* the primary color is set to nextflow-900 because it's the most web accessible */
17
- /* --ifm-color-primary: var(--color-nextflow-900);
17
+ --ifm-color-primary: var(--color-nextflow-900);
18
18
  --ifm-color-primary-dark: var(--color-nextflow-700);
19
19
  --ifm-color-primary-darker: var(--color-nextflow-800);
20
20
  --ifm-color-primary-darkest: var(--color-nextflow-900);
21
21
  --ifm-color-primary-light: var(--color-nextflow-400);
22
22
  --ifm-color-primary-lighter: var(--color-nextflow-300);
23
23
  --ifm-color-primary-lightest: var(--color-nextflow-200);
24
- --ifm-badge-background-color: var(--color-nextflow-300); */
25
- --ifm-color-primary: var(--color-blu-600);
26
- --ifm-color-primary-dark: var(--color-blu-700);
27
- --ifm-color-primary-darker: var(--color-blu-800);
28
- --ifm-color-primary-darkest: var(--color-blu-900);
29
- --ifm-color-primary-light: var(--color-blu-400);
30
- --ifm-color-primary-lighter: var(--color-blu-300);
31
- --ifm-color-primary-lightest: var(--color-blu-200);
32
- --ifm-badge-background-color: var(--color-blu-300);
24
+ --ifm-badge-background-color: var(--color-nextflow-300);
25
+
33
26
  --ifm-navbar-sidebar-width: 100%;
34
27
  --ifm-code-font-size: 95%;
35
28
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -151,11 +144,9 @@ Infima is Docusaurus's built in CSS framework.
151
144
  --color-blu-1000: #1e2768;
152
145
  --color-blu: #4256e7;
153
146
 
154
- /* --color-primary: var(--color-nextflow-800);
155
- --color-secondary: var(--color-nextflow-500); */
156
- --color-primary: var(--color-blu-800);
157
- --color-secondary: var(--color-blu-600);
158
- --color-accent: var(--color-blu-200);
147
+ --color-primary: var(--color-nextflow-900);
148
+ --color-secondary: var(--color-nextflow-500);
149
+ --color-accent: var(--color-nextflow-200);
159
150
  --color-neutral: #3d4451;
160
151
  --color-base-100: #ffffff;
161
152
  --color-base-200: #f2f2f2;
@@ -187,20 +178,13 @@ body {
187
178
  /* Dark mode */
188
179
  [data-theme='dark'] {
189
180
  color-scheme: dark;
190
- /* --ifm-color-primary: var(--color-nextflow-300);
181
+ --ifm-color-primary: var(--color-nextflow-300);
191
182
  --ifm-color-primary-dark: var(--color-nextflow-400);
192
183
  --ifm-color-primary-darker: var(--color-nextflow-500);
193
184
  --ifm-color-primary-darkest: var(--color-nextflow-600);
194
185
  --ifm-color-primary-light: var(--color-nextflow-300);
195
186
  --ifm-color-primary-lighter: var(--color-nextflow-200);
196
- --ifm-color-primary-lightest: var(--color-nextflow-100); */
197
- --ifm-color-primary: var(--color-blu-300);
198
- --ifm-color-primary-dark: var(--color-blu-400);
199
- --ifm-color-primary-darker: var(--color-blu-500);
200
- --ifm-color-primary-darkest: var(--color-blu-600);
201
- --ifm-color-primary-light: var(--color-blu-300);
202
- --ifm-color-primary-lighter: var(--color-blu-200);
203
- --ifm-color-primary-lightest: var(--color-blu-100);
187
+ --ifm-color-primary-lightest: var(--color-nextflow-100);
204
188
  --ifm-navbar-background-color: rgb(28, 28, 30);
205
189
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
206
190
  --ifm-code-color: var(--color-red-400);
@@ -209,18 +193,15 @@ body {
209
193
  --ifm-heading-color: #e3e3e3;
210
194
 
211
195
  /* dark mode overrides */
212
- /* --color-primary: var(--color-nextflow-500);
213
- --color-secondary: var(--color-nextflow-500); */
214
- --color-primary: var(--color-blu-500);
215
- --color-secondary: var(--color-blu-500);
216
- --color-accent: var(--color-blu-300);
217
- /* --color-accent: #1fb2a5; */
196
+ --color-primary: var(--color-nextflow-500);
197
+ --color-secondary: var(--color-nextflow-500);
198
+ --color-accent: #1fb2a5;
218
199
  --color-neutral: #191d24;
219
200
  --color-base-100: rgb(28, 28, 30);
220
201
  --color-base-200: #242933;
221
202
  --color-base-300: #20252e;
222
203
 
223
- --color-info: var(--color-wave-300);
204
+ --color-info: var(--color-wave-300);
224
205
  --color-success: var(--color-nextflow-300);
225
206
  --color-warning: var(--color-multiqc-300);
226
207
  --color-error: var(--color-fusion-300);
@@ -350,7 +331,7 @@ body {
350
331
  --color-brand-1200: #151121;
351
332
  --color-brand-1300: #141024;
352
333
  --color-brand-1400: #110d1d;
353
- --color-brand: #160f26;
334
+ --color-brand: #201637;
354
335
 
355
336
  /* Gray Colors */
356
337
  --color-gray-100: #f7f7f7;
@@ -389,10 +370,8 @@ body {
389
370
  --color-blu-1000: #1e2768;
390
371
  --color-blu: #4256e7;
391
372
 
392
- /* --color-primary: var(--color-nextflow-800);
393
- --color-secondary: var(--color-nextflow-500); */
394
- --color-primary: var(--color-blu-600);
395
- --color-secondary: var(--color-blu-500);
373
+ --color-primary: var(--color-nextflow-900);
374
+ --color-secondary: var(--color-nextflow-500);
396
375
  --color-accent: #f59e0b;
397
376
  --color-neutral: #3d4451;
398
377
  --color-base-100: #ffffff;
package/src/styles/buttons.css CHANGED
@@ -1,11 +1,9 @@
1
1
  .btn {
2
2
  border-radius: 4px;
3
3
  transition: all 0.3s;
4
- /* background: var(--color-nextflow-500);
5
- border: 1px solid var(--color-nextflow-700); */
6
- color: white;
7
- background: var(--color-blu);
8
- border: 1px solid var(--color-blu);
4
+ color: black;
5
+ background: var(--color-nextflow-500);
6
+ border: 1px solid var(--color-nextflow-700);
9
7
  font-weight: 500;
10
8
  font-size: 0.9rem;
11
9
  text-align: center;
@@ -13,8 +11,8 @@
13
11
  width: auto;
14
12
  text-decoration: none !important;
15
13
  &:hover {
16
- /* background: var(--color-nextflow-600); */
17
- background: var(--color-blu-700);
14
+ background: var(--color-nextflow-700);
15
+
18
16
  }
19
17
  }
20
18
 
@@ -31,12 +29,11 @@
31
29
  [data-theme='dark'] {
32
30
  .btn {
33
31
  color: black;
34
- background: var(--color-blu-400);
35
- border: 1px solid var(--color-blu-400);
32
+ background: var(--color-nextflow-400);
33
+ border: 1px solid var(--color-nextflow-400);
36
34
  &:hover {
37
- /* background: var(--color-nextflow-600); */
38
- background: var(--color-blu-700);
39
- border: 1px solid var(--color-blu-700);
35
+ background: var(--color-nextflow-600);
36
+ border: 1px solid var(--color-nextflow-700);
40
37
  }
41
38
  }
42
39
  .btn-outline {
package/src/theme/Homepage/index.tsx CHANGED
@@ -27,19 +27,19 @@ const CARD_DATA = {
27
27
  platform: [
28
28
  {
29
29
  href: '/platform-cloud/',
30
- icon: <IconSeqeraCloud className="text-black" />,
30
+ icon: <IconSeqeraCloud className="text-brand dark:text-white" />,
31
31
  title: 'Seqera Cloud',
32
32
  description: 'Comprehensive platform empowering teams across the entire scientific lifecycle',
33
33
  },
34
34
  {
35
35
  href: '/platform-enterprise/',
36
- icon: <IconSeqeraEnterprise className="text-black" />,
36
+ icon: <IconSeqeraEnterprise className="text-brand dark:text-white" />,
37
37
  title: 'Seqera Enterprise',
38
38
  description: 'Platform management within your own infrastructure for greater control',
39
39
  },
40
40
  {
41
41
  href: '/fusion/',
42
- icon: <IconFusion className="text-fusion-600" />,
42
+ icon: <IconFusion className="text-brand dark:text-white" />,
43
43
  title: 'Fusion',
44
44
  description: 'Optimized file system for cloud-native data pipelines',
45
45
  },
@@ -47,13 +47,13 @@ const CARD_DATA = {
47
47
  ai: [
48
48
  {
49
49
  href: '/platform-cloud/seqera-ai/',
50
- icon: <IconAI className="text-black max-w-5.5" />,
50
+ icon: <IconAI className="text-brand max-w-5.5" />,
51
51
  title: 'Seqera AI',
52
52
  description: 'Intelligent command-line assistant that helps you build, run, and manage bioinformatics workflows',
53
53
  },
54
54
  {
55
55
  href: '/platform-cloud/seqera-mcp/',
56
- icon: <IconMCP className="text-black max-w-5.5" />,
56
+ icon: <IconMCP className="text-brand max-w-5.5" />,
57
57
  title: 'Seqera MCP',
58
58
  description: 'AI assistant that interacts with the Seqera ecosystem',
59
59
  },
@@ -61,19 +61,19 @@ const CARD_DATA = {
61
61
  openSource: [
62
62
  {
63
63
  href: '/nextflow/',
64
- icon: <IconNextflow className="text-nextflow-600" />,
64
+ icon: <IconNextflow className="text-brand dark:text-white" />,
65
65
  title: 'Nextflow',
66
66
  description: 'Open-source orchestrator for deploying workflows',
67
67
  },
68
68
  {
69
69
  href: '/wave/',
70
- icon: <IconWave className="text-wave-600" />,
70
+ icon: <IconWave className="text-brand dark:text-white" />,
71
71
  title: 'Wave',
72
72
  description: 'Next-generation container provisioning for data analysis',
73
73
  },
74
74
  {
75
75
  href: '/multiqc/',
76
- icon: <IconMultiQC className="text-multiqc-600" />,
76
+ icon: <IconMultiQC className="text-brand dark:text-white" />,
77
77
  title: 'MultiQC',
78
78
  description: 'Open-source tool to aggregate bioinformatic analyses results',
79
79
  },
@@ -81,19 +81,19 @@ const CARD_DATA = {
81
81
  help: [
82
82
  {
83
83
  href: 'https://support.seqera.io/',
84
- icon: <IconQuestionMark className="text-black" />,
84
+ icon: <IconQuestionMark className="text-brand" />,
85
85
  title: 'Support Portal',
86
86
  description: 'Contact support for help with your platform or enterprise account',
87
87
  },
88
88
  {
89
89
  href: 'https://community.seqera.io/',
90
- icon: <IconChatBubbles className="text-black" />,
90
+ icon: <IconChatBubbles className="text-brand" />,
91
91
  title: 'Community Forum',
92
92
  description: 'Discuss, share and network with other users',
93
93
  },
94
94
  {
95
95
  href: 'https://status.seqera.io/',
96
- icon: <IconServiceStatus className="text-black" />,
96
+ icon: <IconServiceStatus className="text-brand" />,
97
97
  title: 'Service Status',
98
98
  description: 'Monitor platform performance in real time',
99
99
  },