@seqera/docusaurus-theme-seqera 1.0.0 → 1.0.1-next.9

package/lib/main-styles.css

@@ -0,0 +1,322 @@
+@import 'tailwindcss';
+@plugin "daisyui";
+@config "../tailwind.config.js";
+
+/* Dark mode variant */
+@custom-variant dark (&:is([data-theme="dark"] *));
+
+/* Daisy UI settings */
+@plugin "daisyui/theme" {
+  name: 'light';
+  default: true;
+  --color-primary: var(--color-nextflow-800);
+  --color-secondary: var(--color-nextflow-200);
+  --color-accent: #f59e0b;
+  --color-neutral: #3d4451;
+  --color-base-100: #ffffff;
+  --color-base-200: #f2f2f2;
+  --color-base-300: #e5e6e6;
+  --color-info: #3abff8;
+  --color-success: #36d399;
+  --color-warning: #fbbd23;
+  --color-error: #f87272;
+}
+
+@plugin "daisyui/theme" {
+  name: 'dark';
+  --color-primary: var(--color-nextflow-500);
+  --color-secondary: var(--color-nextflow-500);
+  --color-accent: #1fb2a5;
+  --color-neutral: #191d24;
+  --color-base-100: rgb(28, 28, 30);
+  --color-base-200: #242933;
+  --color-base-300: #20252e;
+  --color-info: #3abff8;
+  --color-success: #36d399;
+  --color-warning: #fbbd23;
+  --color-error: #f87272;
+}
+
+/***
+Infima is Docusaurus's built in CSS framework. 
+
+- We have removed Infima using CSS Cascade Layers (https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-css-cascade-layers),
+- We do this so we can more seamless integrate Tailwind 4
+- However, Infima root styles settings can still be used and configured below
+
+**/
+:root {
+  /* the primary color is set to nextflow-900 because it's the most web accessible */
+  --ifm-color-primary: var(--color-nextflow-900);
+  --ifm-color-primary-dark: var(--color-nextflow-700);
+  --ifm-color-primary-darker: var(--color-nextflow-800);
+  --ifm-color-primary-darkest: var(--color-nextflow-900);
+  --ifm-color-primary-light: var(--color-nextflow-400);
+  --ifm-color-primary-lighter: var(--color-nextflow-300);
+  --ifm-color-primary-lightest: var(--color-nextflow-200);
+  --ifm-badge-background-color: var(--color-nextflow-300);
+  --ifm-navbar-sidebar-width: 100%;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-navbar-height: 4rem;
+  --ifm-breadcrumb-item-background-active: rgba(0, 0, 0, 0);
+  --ifm-code-color: var(--color-red-600);
+
+  /* remove box shadow variables */
+  --ifm-global-shadow-lw: none;
+  --ifm-global-shadow-md: none;
+  --ifm-global-shadow-tl: none;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+}
+
+/* Dark mode */
+[data-theme='dark'] {
+  color-scheme: dark;
+  --ifm-color-primary: var(--color-nextflow-300);
+  --ifm-color-primary-dark: var(--color-nextflow-400);
+  --ifm-color-primary-darker: var(--color-nextflow-500);
+  --ifm-color-primary-darkest: var(--color-nextflow-600);
+  --ifm-color-primary-light: var(--color-nextflow-300);
+  --ifm-color-primary-lighter: var(--color-nextflow-200);
+  --ifm-color-primary-lightest: var(--color-nextflow-100);
+  --ifm-navbar-background-color: rgb(28, 28, 30);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-code-color: var(--color-red-400);
+  --ifm-color-content: #e3e3e3;
+  --ifm-font-color-base: #e3e3e3;
+  --ifm-heading-color: #e3e3e3;
+}
+
+/* Seqera Tailwind  */
+@theme {
+  /* Breakpoints */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 996px; /* matches docusaurus default */
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+
+  /* Font Families */
+  --font-title: 'Degular', Helvetica, sans-serif;
+  --font-display: 'Degular', Helvetica, sans-serif;
+  --font-body: 'Inter', Helvetica, sans-serif;
+
+  /* Font Sizes with Line Heights */
+  --font-size-xs: 12px;
+  --font-size-xs--line-height: 18px;
+
+  --font-size-sm: 14px;
+  --font-size-sm--line-height: 21px;
+
+  --font-size-base: 16px;
+  --font-size-base--line-height: 24px;
+
+  --font-size-lg: 18px;
+  --font-size-lg--line-height: 26px;
+
+  --font-size-xl: 24px;
+  --font-size-xl--line-height: 32px;
+
+  --font-size-2xl: 28px;
+  --font-size-2xl--line-height: 1;
+
+  --font-size-3xl: 32px;
+  --font-size-3xl--line-height: 1;
+
+  --font-size-4xl: 40px;
+  --font-size-4xl--line-height: 1;
+
+  --font-size-5xl: 48px;
+  --font-size-5xl--line-height: 1;
+
+  --font-size-6xl: 56px;
+  --font-size-6xl--line-height: 1;
+
+  --font-size-7xl: 60px;
+  --font-size-7xl--line-height: 1;
+
+  --font-size-8xl: 64px;
+  --font-size-8xl--line-height: 1;
+
+  --font-size-9xl: 68px;
+  --font-size-9xl--line-height: 1;
+
+  /* Nextflow (green) colors */
+  --color-nextflow-100: #e2f7f3;
+  --color-nextflow-200: #b6ece2;
+  --color-nextflow-300: #86e0ce;
+  --color-nextflow-400: #56d3ba;
+  --color-nextflow-500: #31c9ac;
+  --color-nextflow-600: #0dc09d;
+  --color-nextflow-700: #0cae8e;
+  --color-nextflow-800: #0a967b;
+  --color-nextflow-900: #087f68;
+  --color-nextflow-1000: #065647;
+  --color-nextflow: #0dc09d;
+
+  /* Wave (blue) colors */
+  --color-wave-100: #e8f2ff;
+  --color-wave-200: #c5dffe;
+  --color-wave-300: #9ecafe;
+  --color-wave-400: #77b5fe;
+  --color-wave-500: #5aa5fd;
+  --color-wave-600: #3d95fd;
+  --color-wave-700: #3787e5;
+  --color-wave-800: #3074c5;
+  --color-wave-900: #2863a7;
+  --color-wave-1000: #1b4372;
+  --color-wave: #3d95fd;
+
+  /* Fusion (red) colors */
+  --color-fusion-100: #feedec;
+  --color-fusion-200: #fed2d0;
+  --color-fusion-300: #fdb4b1;
+  --color-fusion-400: #fc9592;
+  --color-fusion-500: #fb7f7a;
+  --color-fusion-600: #fa6863;
+  --color-fusion-700: #e25e5a;
+  --color-fusion-800: #c3514d;
+  --color-fusion-900: #a64541;
+  --color-fusion-1000: #712f2c;
+  --color-fusion: #fa6863;
+
+  /* MultiQC (orange) colors */
+  --color-multiqc-100: #fdf0e9;
+  --color-multiqc-200: #fbd9c8;
+  --color-multiqc-300: #f8c0a3;
+  --color-multiqc-400: #f5a67e;
+  --color-multiqc-500: #f39362;
+  --color-multiqc-600: #f18046;
+  --color-multiqc-700: #da743f;
+  --color-multiqc-800: #bc6437;
+  --color-multiqc-900: #a0552f;
+  --color-multiqc-1000: #6c3a20;
+  --color-multiqc: #f18046;
+
+  /* Brand (purple/grey) colors */
+  --color-brand-100: #f3f3f4;
+  --color-brand-200: #e8e7e9;
+  --color-brand-300: #d0cfd4;
+  --color-brand-400: #b9b7be;
+  --color-brand-500: #a29fa8;
+  --color-brand-600: #8a8792;
+  --color-brand-700: #736f7d;
+  --color-brand-800: #5c5767;
+  --color-brand-900: #453f51;
+  --color-brand-1000: #2d273c;
+  --color-brand-1100: #160f26;
+  --color-brand-1200: #151121;
+  --color-brand-1300: #141024;
+  --color-brand-1400: #110d1d;
+  --color-brand: #160f26;
+
+  /* Gray Colors */
+  --color-gray-100: #f7f7f7;
+  --color-gray-200: #eaebeb;
+  --color-gray-300: #dddede;
+  --color-gray-400: #cfd0d1;
+  --color-gray-500: #c4c6c7;
+  --color-gray-600: #babcbd;
+  --color-gray-700: #a8aaab;
+  --color-gray-800: #919393;
+  --color-gray-900: #7b7b7b;
+  --color-gray-1000: #545555;
+
+  /* Product (purple) colors */
+  --color-product-100: #eae8f1;
+  --color-product-200: #cbc6dd;
+  --color-product-300: #a9a1c6;
+  --color-product-400: #867baf;
+  --color-product-500: #6c5e9d;
+  --color-product-600: #52428c;
+  --color-product-700: #4a3c7f;
+  --color-product-800: #40346d;
+  --color-product-900: #362c5d;
+  --color-product-1000: #251e3f;
+
+  /* Seqera "blue" Cclors */
+  --color-blu-100: #e8ebfc;
+  --color-blu-200: #c6ccf8;
+  --color-blu-300: #a1abf3;
+  --color-blu-400: #7b89ee;
+  --color-blu-500: #5e6feb;
+  --color-blu-600: #4256e7;
+  --color-blu-700: #3c4ed1;
+  --color-blu-800: #3443b4;
+  --color-blu-900: #2c3999;
+  --color-blu-1000: #1e2768;
+  --color-blu: #4256e7;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-full: 9999px;
+
+  /* Height Extensions */
+  --height-18: 4.5rem;
+
+  /* Z-Index */
+  --z-index-header: 100;
+  --z-index-sidebar: 150;
+}
+
+/* Custom Utilities for Fractional Sizing */
+@layer utilities {
+  .container {
+    max-width: none;
+    margin: 0 auto;
+  }
+  .container-sm {
+    max-width: 640px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-md {
+    max-width: 996px; /* matches docusaurus default */
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-lg {
+    max-width: 1024px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-xl {
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-2xl {
+    max-width: 1536px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.mobilemenu {
+  .menu__link:hover {
+    background: none;
+  }
+  .menu__link--active {
+    background: none;
+  }
+}

package/lib/nprogress.css

@@ -0,0 +1,36 @@
+
+
+/**
+ * Styles for NProgress
+ * Copied over to remove unused styles for the spinner.
+ * https://github.com/rstacruz/nprogress/blob/master/nprogress.css
+ */
+
+:root {
+  --docusaurus-progress-bar-color: var(--ifm-color-primary);
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: var(--docusaurus-progress-bar-color);
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),
+    0 0 5px var(--docusaurus-progress-bar-color);
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}

package/lib/nprogress.d.ts

@@ -0,0 +1,4 @@
+import type { ClientModule } from '@docusaurus/types';
+import './nprogress.css';
+declare const clientModule: ClientModule;
+export default clientModule;

package/lib/nprogress.js

@@ -0,0 +1,19 @@
+import nprogress from 'nprogress';
+import './nprogress.css';
+nprogress.configure({ showSpinner: false });
+const delay = 200;
+const clientModule = {
+    onRouteUpdate({ location, previousLocation }) {
+        if (previousLocation && location.pathname !== previousLocation.pathname) {
+            const progressBarTimeout = window.setTimeout(() => {
+                nprogress.start();
+            }, delay);
+            return () => window.clearTimeout(progressBarTimeout);
+        }
+        return undefined;
+    },
+    onRouteDidUpdate() {
+        nprogress.done();
+    },
+};
+export default clientModule;

package/lib/options.d.ts

@@ -0,0 +1,8 @@
+import { Joi } from '@docusaurus/utils-validation';
+import type { Options, PluginOptions } from '@seqera/docusaurus-theme-seqera';
+import type { ThemeConfig } from '@docusaurus/theme-common';
+import type { ThemeConfigValidationContext, OptionValidationContext } from '@docusaurus/types';
+export declare const DEFAULT_CONFIG: ThemeConfig;
+export declare const ThemeConfigSchema: Joi.ObjectSchema<ThemeConfig>;
+export declare function validateThemeConfig({ validate, themeConfig, }: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig;
+export declare function validateOptions({ validate, options, }: OptionValidationContext<Options, PluginOptions>): PluginOptions;