diff --git a/docs/docs-next/docusaurus.config.ts b/docs/docs-next/docusaurus.config.ts
index 7b1ef851f3b0f..f911a14d8f0ac 100644
--- a/docs/docs-next/docusaurus.config.ts
+++ b/docs/docs-next/docusaurus.config.ts
@@ -3,166 +3,164 @@ import type { Config } from "@docusaurus/types";
import type * as Preset from "@docusaurus/preset-classic";
const config: Config = {
- title: "Dagster Docs - Beta",
- tagline:
- "Dagster is a Python framework for building production-grade data platforms.",
- url: "https://docs.dagster.io",
- favicon: "img/favicon.ico",
+ title: "Dagster Docs - Beta",
+ tagline:
+ "Dagster is a Python framework for building production-grade data platforms.",
+ url: "https://docs.dagster.io",
+ favicon: "img/favicon.ico",
- baseUrl: "/",
- onBrokenLinks: "throw",
- onBrokenMarkdownLinks: "throw",
- organizationName: "dagster",
- projectName: "dagster",
- markdown: {
- mermaid: true,
- },
- themes: ["@docusaurus/theme-mermaid"],
- i18n: { defaultLocale: "en", locales: ["en"] },
- plugins: [
- require.resolve("docusaurus-plugin-sass"),
- require.resolve("docusaurus-plugin-image-zoom"),
- ],
- themeConfig: {
- colorMode: {
- defaultMode: "dark",
- disableSwitch: false,
- respectPrefersColorScheme: true,
- },
- prism: {
- theme: prismThemes.github,
- darkTheme: prismThemes.dracula,
- additionalLanguages: ["diff", "json", "bash"],
- },
- zoom: {
- selector: ".markdown > img, .tabs-container img ",
- config: {
- // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
- background: {
- light: "rgb(255, 255, 255)",
- dark: "rgb(50, 50, 50)",
- },
- },
- },
- tableOfContents: {
- minHeadingLevel: 2,
- maxHeadingLevel: 4,
- },
- navbar: {
- title: "Dagster Docs - Beta",
- style: "dark",
- logo: {
- alt: "Dagster Logo",
- src: "img/logo.svg",
- href: "/",
- },
- items: [
- {
- label: "Docs",
- type: "doc",
- docId: "intro",
- position: "left",
- },
- {
- label: "Integrations",
- type: "doc",
- docId: "integrations",
- position: "left",
- },
- {
- label: "Dagster+",
- type: "doc",
- docId: "dagster-plus",
- position: "left",
- },
- {
- label: "References",
- type: "doc",
- docId: "api",
- position: "left",
- },
- {
- label: "Changelog",
- type: "doc",
- docId: "changelog",
- position: "right",
- },
- ],
- },
- image: "img/docusaurus-social-card.jpg",
- docs: {
- sidebar: {
- autoCollapseCategories: true,
- hideable: true,
- },
- },
+ baseUrl: "/",
+ onBrokenLinks: "throw",
+ onBrokenMarkdownLinks: "throw",
+ organizationName: "dagster",
+ projectName: "dagster",
+ markdown: {
+ mermaid: true,
+ },
+ themes: ["@docusaurus/theme-mermaid"],
+ i18n: { defaultLocale: "en", locales: ["en"] },
+ plugins: [
+ require.resolve("docusaurus-plugin-sass"),
+ require.resolve("docusaurus-plugin-image-zoom"),
+ ],
+ themeConfig: {
+ colorMode: {
+ defaultMode: "dark",
+ disableSwitch: false,
+ respectPrefersColorScheme: true,
+ },
+ prism: {
+ theme: prismThemes.github,
+ darkTheme: prismThemes.dracula,
+ additionalLanguages: ["diff", "json", "bash"],
+ },
+ zoom: {
+ selector: ".markdown > img, .tabs-container img ",
+ config: {
+ // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
+ background: {
+ light: "rgb(255, 255, 255)",
+ dark: "rgb(50, 50, 50)",
+ },
+ },
+ },
+ tableOfContents: {
+ minHeadingLevel: 2,
+ maxHeadingLevel: 4,
+ },
+ navbar: {
+ logo: {
+ alt: "Dagster Logo",
+ src: "img/dagster-docs-logo.svg",
+ srcDark: "img/dagster-docs-logo-dark.svg",
+ href: "/",
+ },
+ items: [
+ {
+ label: "Docs",
+ type: "doc",
+ docId: "intro",
+ position: "left",
+ },
+ {
+ label: "Integrations",
+ type: "doc",
+ docId: "integrations",
+ position: "left",
+ },
+ {
+ label: "Dagster+",
+ type: "doc",
+ docId: "dagster-plus",
+ position: "left",
+ },
+ {
+ label: "References",
+ type: "doc",
+ docId: "api",
+ position: "left",
+ },
+ {
+ label: "Changelog",
+ type: "doc",
+ docId: "changelog",
+ position: "right",
+ },
+ ],
+ },
+ image: "img/docusaurus-social-card.jpg",
+ docs: {
+ sidebar: {
+ autoCollapseCategories: true,
+ hideable: true,
+ },
+ },
- footer: {
- style: "dark",
- logo: {
- alt: "Dagster Logo",
- src: "img/logo.svg",
- href: "/",
- },
- links: [
- {
- title: "Docs",
- items: [
- {
- label: "Docs",
- to: "/",
- },
- ],
- },
- {
- title: "Community",
- items: [
- {
- label: "Stack Overflow",
- href: "https://stackoverflow.com/questions/tagged/dagster",
- },
- {
- label: "Twitter",
- href: "https://twitter.com/dagster",
- },
- ],
- },
- {
- title: "More",
- items: [
- {
- label: "GitHub",
- href: "https://github.com/dagster-io/dagster",
- },
- ],
- },
- ],
- copyright: `Copyright © ${new Date().getFullYear()} Dagster Labs.`,
- },
- } satisfies Preset.ThemeConfig,
+ footer: {
+ logo: {
+ alt: "Dagster Logo",
+ src: "img/logo.svg",
+ href: "/",
+ },
+ links: [
+ {
+ title: "Docs",
+ items: [
+ {
+ label: "Docs",
+ to: "/",
+ },
+ ],
+ },
+ {
+ title: "Community",
+ items: [
+ {
+ label: "Stack Overflow",
+ href: "https://stackoverflow.com/questions/tagged/dagster",
+ },
+ {
+ label: "Twitter",
+ href: "https://twitter.com/dagster",
+ },
+ ],
+ },
+ {
+ title: "More",
+ items: [
+ {
+ label: "GitHub",
+ href: "https://github.com/dagster-io/dagster",
+ },
+ ],
+ },
+ ],
+ copyright: `Copyright © ${new Date().getFullYear()} Dagster Labs.`,
+ },
+ } satisfies Preset.ThemeConfig,
- presets: [
- [
- "@docusaurus/preset-classic",
- {
- docs: {
- sidebarPath: "./sidebars.ts",
- routeBasePath: "/",
- editUrl:
- "https://github.com/dagster-io/dagster/tree/docs/revamp/docs/docs-next",
- },
- blog: false,
- theme: {
- customCss: [
- require.resolve(
- "./node_modules/modern-normalize/modern-normalize.css"
- ),
- require.resolve("./src/styles/custom.scss"),
- ],
- },
- } satisfies Preset.Options,
- ],
- ],
+ presets: [
+ [
+ "@docusaurus/preset-classic",
+ {
+ docs: {
+ sidebarPath: "./sidebars.ts",
+ routeBasePath: "/",
+ editUrl:
+ "https://github.com/dagster-io/dagster/tree/docs/revamp/docs/docs-next",
+ },
+ blog: false,
+ theme: {
+ customCss: [
+ require.resolve(
+ "./node_modules/modern-normalize/modern-normalize.css"
+ ),
+ require.resolve("./src/styles/custom.scss"),
+ ],
+ },
+ } satisfies Preset.Options,
+ ],
+ ],
};
export default config;
diff --git a/docs/docs-next/src/styles/colors.scss b/docs/docs-next/src/styles/colors.scss
new file mode 100644
index 0000000000000..b59ed58a4d8c0
--- /dev/null
+++ b/docs/docs-next/src/styles/colors.scss
@@ -0,0 +1,125 @@
+:root {
+ /* Dagster Color Palette */
+ --dagster-gray-990: rgba(3, 6, 21, 1);
+ --dagster-gray-950: rgba(13, 17, 33, 1);
+ --dagster-gray-900: rgba(23, 28, 44, 1);
+ --dagster-gray-850: rgba(33, 39, 56, 1);
+ --dagster-gray-800: rgba(43, 50, 68, 1);
+ --dagster-gray-750: rgba(53, 61, 80, 1);
+ --dagster-gray-700: rgba(63, 72, 91, 1);
+ --dagster-gray-650: rgba(73, 83, 103, 1);
+ --dagster-gray-600: rgba(83, 94, 115, 1);
+ --dagster-gray-550: rgba(93, 105, 126, 1);
+ --dagster-gray-500: rgba(103, 116, 138, 1);
+ --dagster-gray-450: rgba(118, 130, 150, 1);
+ --dagster-gray-400: rgba(133, 144, 161, 1);
+ --dagster-gray-350: rgba(149, 158, 173, 1);
+ --dagster-gray-300: rgba(164, 172, 185, 1);
+ --dagster-gray-250: rgba(179, 185, 197, 1);
+ --dagster-gray-200: rgba(194, 199, 208, 1);
+ --dagster-gray-150: rgba(209, 213, 220, 1);
+ --dagster-gray-100: rgba(225, 227, 232, 1);
+ --dagster-gray-50: rgba(240, 241, 243, 1);
+ --dagster-gray-10: rgba(247, 248, 249, 1);
+ --dagster-gray-translucent-12: rgba(103, 116, 138, 0.12);
+ --dagster-gray-translucent-15: rgba(103, 116, 138, 0.15);
+ --dagster-gray-translucent-20: rgba(103, 116, 138, 0.2);
+ --dagster-gray-translucent-25: rgba(103, 116, 138, 0.25);
+ --dagster-gray-translucent-30: rgba(103, 116, 138, 0.3);
+ --dagster-white: rgba(255, 255, 255, 1);
+
+ --dagster-blue-990: rgba(14, 15, 52, 1);
+ --dagster-blue-950: rgba(17, 18, 62, 1);
+ --dagster-blue-900: rgba(25, 24, 82, 1);
+ --dagster-blue-800: rgba(33, 30, 102, 1);
+ --dagster-blue-700: rgba(48, 43, 141, 1);
+ --dagster-blue-600: rgba(64, 55, 181, 1);
+ --dagster-blue-500: rgba(79, 67, 221, 1);
+ --dagster-blue-400: rgba(114, 105, 228, 1);
+ --dagster-blue-300: rgba(149, 142, 235, 1);
+ --dagster-blue-200: rgba(185, 180, 241, 1);
+ --dagster-blue-100: rgba(220, 217, 248, 1);
+ --dagster-blue-50: rgba(237, 236, 252, 1);
+ --dagster-blue-10: rgba(246, 246, 253, 1);
+ --dagster-blue-translucent-12: rgba(79, 67, 221, 0.12);
+ --dagster-blue-translucent-15: rgba(79, 67, 221, 0.15);
+ --dagster-blue-translucent-20: rgba(79, 67, 221, 0.2);
+ --dagster-blue-translucent-25: rgba(79, 67, 221, 0.25);
+ --dagster-blue-translucent-30: rgba(79, 67, 221, 0.3);
+
+ --dagster-yellow-990: rgba(36, 29, 26, 1);
+ --dagster-yellow-950: rgba(47, 36, 27, 1);
+ --dagster-yellow-900: rgba(70, 51, 30, 1);
+ --dagster-yellow-800: rgba(93, 66, 32, 1);
+ --dagster-yellow-700: rgba(138, 97, 37, 1);
+ --dagster-yellow-600: rgba(184, 127, 42, 1);
+ --dagster-yellow-500: rgba(229, 157, 47, 1);
+ --dagster-yellow-400: rgba(234, 177, 89, 1);
+ --dagster-yellow-300: rgba(239, 196, 130, 1);
+ --dagster-yellow-200: rgba(245, 216, 172, 1);
+ --dagster-yellow-100: rgba(250, 235, 213, 1);
+ --dagster-yellow-50: rgba(252, 245, 234, 1);
+ --dagster-yellow-10: rgba(252, 245, 234, 1);
+ --dagster-yellow-translucent-12: rgba(229, 157, 47, 0.12);
+ --dagster-yellow-translucent-15: rgba(229, 157, 47, 0.15);
+ --dagster-yellow-translucent-20: rgba(229, 157, 47, 0.2);
+ --dagster-yellow-translucent-25: rgba(229, 157, 47, 0.25);
+ --dagster-yellow-translucent-30: rgba(229, 157, 47, 0.3);
+
+ --dagster-red-990: rgba(33, 15, 27, 1);
+ --dagster-red-950: rgba(44, 18, 28, 1);
+ --dagster-red-900: rgba(64, 24, 31, 1);
+ --dagster-red-800: rgba(85, 30, 34, 1);
+ --dagster-red-700: rgba(127, 42, 41, 1);
+ --dagster-red-600: rgba(168, 54, 47, 1);
+ --dagster-red-500: rgba(210, 66, 53, 1);
+ --dagster-red-400: rgba(219, 104, 93, 1);
+ --dagster-red-300: rgba(228, 142, 134, 1);
+ --dagster-red-200: rgba(237, 179, 174, 1);
+ --dagster-red-100: rgba(246, 217, 215, 1);
+ --dagster-red-50: rgba(250, 236, 235, 1);
+ --dagster-red-10: rgba(253, 246, 245, 1);
+ --dagster-red-translucent-12: rgba(210, 66, 53, 0.12);
+ --dagster-red-translucent-15: rgba(210, 66, 53, 0.15);
+ --dagster-red-translucent-20: rgba(210, 66, 53, 0.2);
+ --dagster-red-translucent-25: rgba(210, 66, 53, 0.25);
+ --dagster-red-translucent-30: rgba(210, 66, 53, 0.3);
+
+ --dagster-green-990: rgba(9, 36, 38, 1);
+ --dagster-green-950: rgba(11, 46, 43, 1);
+ --dagster-green-900: rgba(15, 65, 54, 1);
+ --dagster-green-800: rgba(20, 85, 65, 1);
+ --dagster-green-700: rgba(28, 125, 86, 1);
+ --dagster-green-600: rgba(130, 224, 179, 1);
+ --dagster-green-500: rgba(46, 204, 129, 1);
+ --dagster-green-400: rgba(88, 214, 154, 1);
+ --dagster-green-300: rgba(130, 224, 179, 1);
+ --dagster-green-200: rgba(171, 235, 205, 1);
+ --dagster-green-100: rgba(213, 245, 230, 1);
+ --dagster-green-50: rgba(234, 250, 242, 1);
+ --dagster-green-10: rgba(245, 252, 249, 1);
+ --dagster-green-translucent-12: rgba(46, 204, 129, 0.12);
+ --dagster-green-translucent-15: rgba(46, 204, 129, 0.15);
+ --dagster-green-translucent-20: rgba(46, 204, 129, 0.2);
+ --dagster-green-translucent-25: rgba(46, 204, 129, 0.25);
+ --dagster-green-translucent-30: rgba(46, 204, 129, 0.3);
+
+ --dagster-cyan-990: rgba(13, 32, 50, 1);
+ --dagster-cyan-950: rgba(17, 41, 60, 1);
+ --dagster-cyan-900: rgba(24, 58, 78, 1);
+ --dagster-cyan-800: rgba(31, 76, 97, 1);
+ --dagster-cyan-700: rgba(46, 110, 135, 1);
+ --dagster-cyan-600: rgba(60, 145, 172, 1);
+ --dagster-cyan-500: rgba(75, 180, 210, 1);
+ --dagster-cyan-400: rgba(111, 195, 219, 1);
+ --dagster-cyan-300: rgba(147, 210, 228, 1);
+ --dagster-cyan-200: rgba(183, 225, 237, 1);
+ --dagster-cyan-100: rgba(219, 240, 246, 1);
+ --dagster-cyan-50: rgba(237, 247, 250, 1);
+ --dagster-cyan-10: rgba(246, 251, 253, 1);
+ --dagster-cyan-translucent-12: rgba(75, 180, 210, 0.12);
+ --dagster-cyan-translucent-15: rgba(75, 180, 210, 0.15);
+ --dagster-cyan-translucent-20: rgba(75, 180, 210, 0.2);
+ --dagster-cyan-translucent-25: rgba(75, 180, 210, 0.25);
+ --dagster-cyan-translucent-30: rgba(75, 180, 210, 0.3);
+}
diff --git a/docs/docs-next/src/styles/custom.scss b/docs/docs-next/src/styles/custom.scss
index 2e13b1cef3797..5a2133ad69aa8 100644
--- a/docs/docs-next/src/styles/custom.scss
+++ b/docs/docs-next/src/styles/custom.scss
@@ -3,273 +3,156 @@
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
-@font-face {
- font-family: 'Geist';
- src: url('/fonts/GeistVF.woff') format('woff');
-}
-@font-face {
- font-family: 'Geist-Mono';
- src: url('/fonts/GeistMonoVF.woff') format('woff');
-}
+@use "colors"; // Import the theme colors module
+@use "theme-globals"; //Global styles used across both themes
+@use "theme-light"; // Import the light theme module
+@use "theme-dark"; // Import the light theme module
/* You can override the default Infima variables here. */
/* Some styles heavily influenced from: https://github.com/electron/website/blob/main/src/css/custom.scss */
-:root {
-
- --ifm-font-family-base: 'Geist';
- --ifm-heading-font-family: 'Geist';
- --ifm-font-family-monospace: 'Geist-Mono';
-
- // modified base colors
- --ifm-color-primary: var(--dagster-color-primary-500);
- --ifm-color-primary-dark: var(--dagster-color-primary-700);
- --ifm-color-primary-darker: var(--dagster-color-primary-900);
- --ifm-color-primary-darkest: var(--dagster-color-gray-900);
- --ifm-color-primary-light: var(--dagster-color-primary-300);
- --ifm-color-primary-lighter: var(--dagster-color-primary-100);
- --ifm-color-primary-lightest: var(--dagster-color-gray-50);
-
- // modified base vars
- --ifm-code-font-size: 80%;
- --ifm-navbar-height: 70px;
-
- // brand-specific colors
- --dagster-color-light: #deddff; // Lavender
- --dagster-color-mid: #4f43dd; // Blurple
- --dagster-color-dark: #231f1b; // Gray 900
- --dagster-color-secondary-light: #a7ffbf; // Sea Foam
- --dagster-color-secondary-mid: #21463d; // Gable Green
- --dagster-color-blurple-dark: #3f36b1; // Blurple Darker
- --dagster-color-gable-green-dark: #122f2b; // Gable Green Darker
- --dagster-color-gray-500: #86837f;
- --dagster-color-gray-200: #dad8d6;
- --dagster-color-white: #ffffff;
-
- // Add new colors from the palette
- --dagster-color-primary-900: #09086e;
- --dagster-color-primary-700: #0e0ca7;
- --dagster-color-primary-500: #4f43dd;
- --dagster-color-primary-300: #b9b4f1;
- --dagster-color-primary-100: #edecfc;
-
- --dagster-color-gray-900: #231f1b;
- --dagster-color-gray-800: #3a3631;
- --dagster-color-gray-700: #524e48;
- --dagster-color-gray-600: #6b6762;
- --dagster-color-gray-400: #a19d99;
- --dagster-color-gray-300: #bdbab7;
- --dagster-color-gray-150: #f1f1ef;
- --dagster-color-gray-100: #f5f4f2;
- --dagster-color-gray-50: #faf9f7;
-
- --dagster-color-yellow-50: #f8f2eb;
- --dagster-color-yellow-200: #fbe9b5;
- --dagster-color-yellow-500: #fcbc41;
- --dagster-color-yellow-700: #a55802;
-
- --dagster-color-slate: #697690;
- --dagster-color-red: #ff0000;
- --dagster-color-lavender-darker: #c9c6fa;
- --dagster-color-twitter-gray: #f7f7f7;
- --dagster-color-gable-green-08: rgba(22, 59, 54, 0.08);
-
- // custom vars
- --dagster-heading: var(--dagster-color-mid);
- --dagster-inline-code: var(--dagster-color-secondary-mid);
- --ifm-navbar-item-padding-horizontal: 8px;
-
- // docusaurus variables
- --ifm-hover-overlay: rgba(162, 236, 251, 0.2);
- --ifm-link-color: var(--dagster-color-primary-900);
- --ifm-menu-color-active: var(--dagster-color-dark);
- // these require !important because of some weirdness in CSS ordering
- // see: https://github.com/facebook/docusaurus/issues/3678
- --docusaurus-highlighted-code-line-bg: var(--dagster-color-yellow-50);
-
- // infima shadow levels
- // generated from https://www.joshwcomeau.com/shadow-palette/
- --shadow-color: 0deg 0% 63%;
- --shadow-elevation-low: 0px 1px 1px hsl(var(--shadow-color) / 0.07),
- 0px 1.4px 1.4px -1.8px hsl(var(--shadow-color) / 0.06),
- -0.1px 3px 2.9px -3.5px hsl(var(--shadow-color) / 0.04);
- --shadow-elevation-medium: 0px 1px 1px hsl(var(--shadow-color) / 0.06),
- 0px 1.8px 1.7px -0.9px hsl(var(--shadow-color) / 0.05),
- -0.1px 3.5px 3.4px -1.8px hsl(var(--shadow-color) / 0.05),
- -0.1px 7.5px 7.3px -2.7px hsl(var(--shadow-color) / 0.04),
- -0.3px 15px 14.5px -3.5px hsl(var(--shadow-color) / 0.03);
- --shadow-elevation-high: 0px 1px 1px hsl(var(--shadow-color) / 0.06),
- 0px 2.1px 2px -0.4px hsl(var(--shadow-color) / 0.05),
- -0.1px 3.4px 3.3px -0.8px hsl(var(--shadow-color) / 0.05),
- -0.1px 5.2px 5px -1.2px hsl(var(--shadow-color) / 0.05),
- -0.1px 7.9px 7.6px -1.6px hsl(var(--shadow-color) / 0.04),
- -0.2px 12px 11.6px -2px hsl(var(--shadow-color) / 0.04),
- -0.3px 17.9px 17.3px -2.4px hsl(var(--shadow-color) / 0.04),
- -0.5px 25.9px 25.1px -2.8px hsl(var(--shadow-color) / 0.03),
- -0.7px 36.5px 35.3px -3.2px hsl(var(--shadow-color) / 0.03),
- -0.9px 50px 48.4px -3.5px hsl(var(--shadow-color) / 0.03);
-
- --ifm-global-shadow-lw: var(--shadow-elevation-low);
- --ifm-global-shadow-md: var(--shadow-elevation-medium);
- --ifm-global-shadow-tl: var(--shadow-elevation-high);
-}
-:root[data-theme="dark"] {
- // modified base colors
- --ifm-color-primary: #00aeff;
- --ifm-color-primary-dark: #0057c2;
- --ifm-color-primary-darker: #4d4d4f;
- --ifm-color-primary-darkest: #000047;
- --ifm-color-primary-light: #4cc8ff;
- --ifm-color-primary-lighter: #97e1ff;
- --ifm-color-primary-lightest: #e3f7ff;
-
- // docusaurus
- --docusaurus-highlighted-code-line-bg: rgb(13, 15, 28);
-
- // modified base vars
- --ifm-menu-color: var(--ifm-color-primary-lightest);
- --ifm-link-color: var(--dagster-color-light);
- --ifm-menu-color-active: var(--dagster-color-light);
-
- // custom vars
- --dagster-heading: var(--ifm-color-primary-lightest);
- --dagster-inline-code: var(--dagster-color-secondary-light);
+html {
+ font-family: var(--ifm-font-family-base);
+ background: var(--theme-color-background-default);
}
-
-
/* Main content */
.theme-doc-markdown {
- max-width: 900px;
- margin: 0 auto;
- margin-top: 1rem;
- padding-left: 3rem;
+ max-width: 900px;
+ margin: 0 auto;
+ margin-top: 1rem;
+ padding-left: 3rem;
}
/* Custom code for PyObject */
a.pyobject {
- color: var(--dagster-color-red);
+ color: var(--theme-color-text-default);
}
.navbar {
- &--dark {
- --ifm-navbar-background-color: var(--dagster-color-gray-900);
- --ifm-navbar-link-color: var(--dagster-color-light);
- }
-
- &__inner {
- max-width: 1400px;
- margin: 0 0;
- }
-
- &__item {
- // use margin instead of padding so that the border-bottom
- // on active looks better
- padding: 0;
- margin: var(--ifm-navbar-item-padding-vertical)
- var(--ifm-navbar-item-padding-horizontal);
- }
-
- &__link {
- font-weight: var(--ifm-font-weight-normal);
- border-bottom: 3px solid transparent;
-
- &--active {
- color: var(--dagster-color-light);
- border-bottom-color: var(--ifm-link-color);
- }
- }
+ &--dark {
+ --ifm-navbar-link-color: var(--theme-color-text-default);
+ }
+
+ &__inner {
+ max-width: 1400px;
+ margin: 0 0;
+ }
+
+ &__item {
+ // use margin instead of padding so that the border-bottom
+ // on active looks better
+ border: 1px;
+ }
+
+ &__link {
+ font-weight: var(--ifm-font-weight-normal);
+ border-bottom: 3px solid transparent;
+
+ &--active {
+ color: var(--theme-color-accent-blue);
+ border-bottom-color: var(--theme-color-accent-blue);
+ }
+ }
}
.footer {
- &--dark {
- --ifm-footer-background-color: var(--dagster-color-gray-900);
- }
+ --ifm-footer-background-color: var(--theme-color-background-light);
- .footer__logo {
- max-width: 80px;
- }
+ .footer__logo {
+ max-width: 80px;
+ }
}
.markdown {
- line-height: 150%;
-
- code {
- font-size: var(--ifm-code-font-size)
- }
-
- a {
- font-weight: var(--ifm-font-weight-semibold);
- code {
- font-weight: var(--ifm-font-weight-bold);
- }
- }
-
- h1,
- h1:first-child,
- h2,
- h3,
- h4,
- h5,
- h6 {
- --ifm-h1-font-size: 2rem;
- --ifm-h2-font-size: 1.5rem;
- --ifm-h3-font-size: 1.3rem;
- --ifm-h4-font-size: 1rem;
- --ifm-h5-font-size: 0.8rem;
- }
-
- // We want this to only apply to inline code, so don't apply
- // this color to ``` code blocks nor any headings.
- :not(pre):not(h2):not(h3):not(h4):not(h5):not(h6) > code {
- border: none;
- }
-
- // don't apply --dagster-inline-code colors to admonitions
- // as well
- .admonition {
- code {
- color: inherit;
- }
- }
+ line-height: 150%;
+
+ code {
+ font-size: var(--ifm-code-font-size);
+ }
+
+ a {
+ font-weight: var(--ifm-font-weight-semibold);
+ code {
+ font-weight: var(--ifm-font-weight-bold);
+ }
+ }
+
+ h1,
+ h1:first-child,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ --ifm-h1-font-size: 2rem;
+ --ifm-h2-font-size: 1.5rem;
+ --ifm-h3-font-size: 1.3rem;
+ --ifm-h4-font-size: 1rem;
+ --ifm-h5-font-size: 0.8rem;
+ }
+
+ // We want this to only apply to inline code, so don't apply
+ // this color to ``` code blocks nor any headings.
+ :not(pre):not(h2):not(h3):not(h4):not(h5):not(h6) > code {
+ border: none;
+ }
+
+ // don't apply --dagster-inline-code colors to admonitions
+ // as well
+ .admonition {
+ code {
+ color: inherit;
+ }
+ }
}
.button {
- &--outline {
- border: 1px solid;
- color: var(--ifm-color-primary);
- &:hover {
- color: var(--ifm-color-primary-dark);
- }
- }
+ &--outline {
+ border: 1px solid;
+ color: var(--ifm-color-primary);
+ &:hover {
+ color: var(--ifm-color-primary-dark);
+ }
+ }
}
// sidebar
.menu {
- &__link {
- font-size: 1rem;
- font-weight: var(--ifm-font-weight-normal);
-
- &--active {
- font-weight: var(--ifm-font-weight-bold);
- color: var(--dagster-color-blurple-dark);
- }
- }
+ padding-right: 0.5rem !important;
+ &__link {
+ font-size: 1rem;
+ font-weight: var(--ifm-font-weight-normal);
+ color: var(--theme-color-text-light);
+ &:hover {
+ color: var(--theme-color-text-default);
+ background-color: var(--theme-color-background-gray);
+ }
+ &--active {
+ font-weight: var(--ifm-font-weight-normal);
+ color: var(--theme-color-text-default);
+ background-color: var(--theme-color-background-gray);
+ &:hover {
+ background-color: var(--theme-color-background-blue);
+ color: var(--theme-color-text-default);
+ }
+ }
+ }
}
.card {
- border: 1px solid rgba(200, 200, 200, 0.3);
+ border: 1px solid rgba(200, 200, 200, 0.3);
}
.table-of-contents__link--active {
- font-weight: var(--ifm-font-weight-bold);
+ font-weight: var(--ifm-font-weight-bold);
}
.pagination-nav {
- &__link {
- border: 0;
- border-radius: 0;
- border-top: 1px solid var(--dagster-color-gray-300);
- color: var(--dagster-color-gray-900);
- }
+ &__link {
+ border: 0;
+ border-radius: 0;
+ border-top: 1px solid var(--dagster-color-gray-300);
+ color: var(--dagster-color-gray-900);
+ }
}
diff --git a/docs/docs-next/src/styles/theme-dark.scss b/docs/docs-next/src/styles/theme-dark.scss
new file mode 100644
index 0000000000000..31bb892710326
--- /dev/null
+++ b/docs/docs-next/src/styles/theme-dark.scss
@@ -0,0 +1,63 @@
+:root[data-theme="dark"] {
+ //Base Theme Colors
+ --theme-color-background-default: var(--dagster-gray-990);
+ --theme-color-background-light: var(--dagster-gray-950);
+ --theme-color-background-lighter: var(--dagster-gray-850);
+ --theme-color-background-red: var(--dagster-red-translucent-15);
+ --theme-color-background-green: var(--dagster-green-translucent-15);
+ --theme-color-background-blue: var(--dagster-blue-translucent-15);
+ --theme-color-background-yellow: var(--dagster-yellow-translucent-15);
+ --theme-color-background-cyan: var(--dagster-cyan-translucent-15);
+ --theme-color-background-gray: var(--dagster-gray-translucent-15);
+
+ --theme-color-link-default: var(--dagster-blue-200);
+ --theme-color-link-hover: var(--dagster-blue-400);
+
+ --theme-color-text-default: var(--dagster-white);
+ --theme-color-text-light: var(--dagster-gray-300);
+ --theme-color-text-lighter: var(--dagster-gray-500);
+ --theme-color-text-disabled: var(--dagster-gray-600);
+ --theme-color-text-red: var(--dagster-red-200);
+ --theme-color-text-green: var(--dagster-green-200);
+ --theme-color-text-blue: var(--dagster-blue-200);
+ --theme-color-text-yellow: var(--dagster-yellow-200);
+ --theme-color-text-cyan: var(--dagster-cyan-200);
+
+ --theme-color-keyline: var(--dagster-gray-translucent-30);
+ --theme-color-border-default: var(--dagster-gray-800);
+ --theme-color-border-hover: var(--dagster-gray-700);
+
+ --theme-color-accent-primary: var(--dagster-gray-150);
+ --theme-color-accent-primary-hover: var(--dagster-gray-50);
+ --theme-color-accent-reversed: var(--dagster-gray-950);
+ --theme-color-accent-reversed-hover: var(--dagster-800);
+ --theme-color-accent-red: var(--dagster-red-500);
+ --theme-color-accent-red-hover: var(--dagster-red-600);
+ --theme-color-accent-green: var(--dagster-green-500);
+ --theme-color-accent-green-hover: var(--dagster-green-600);
+ --theme-color-accent-blue: var(--dagster-blue-300);
+ --theme-color-accent-blue-hover: var(--dagster-blue-600);
+ --theme-color-accent-yellow: var(--dagster-yellow-500);
+ --theme-color-accent-yellow-hover: var(--dagster-yellow-600);
+ --theme-color-accent-cyan: var(--dagster-cyan-500);
+ --theme-color-accent-cyan-hover: var(--dagster-cyan-600);
+ --theme-color-accent-gray: var(--dagster-gray-500);
+ --theme-color-accent-gray-hover: var(--dagster-gray-600);
+ --theme-color-accent-lavendar: var(--dagster-blue-300);
+ --theme-color-accent-lavendar-hover: var(--dagster-blue-200);
+
+ //App
+ --ifm-background-color: var(--theme-color-background-default);
+ --ifm-link-color: var(--theme-color-link-default);
+ --ifm-toc-border-color: var(--theme-color-keyline);
+
+ //Top Navbar
+ --ifm-navbar-height: 60px;
+ --ifm-navbar-background-color: var(--theme-color-background-default);
+ --ifm-navbar-item-padding-horizontal: 8px;
+
+ //Left Menu
+ --ifm-menu-color: var(--theme-color-text-light);
+ --ifm-hover-overlay: var(--dagster-blue-translucent-25);
+ --ifm-menu-color-active: var(--dagster-blue-700);
+}
diff --git a/docs/docs-next/src/styles/theme-globals.scss b/docs/docs-next/src/styles/theme-globals.scss
new file mode 100644
index 0000000000000..21e56503afc71
--- /dev/null
+++ b/docs/docs-next/src/styles/theme-globals.scss
@@ -0,0 +1,25 @@
+@font-face {
+ font-family: "Geist";
+ src: url("/fonts/GeistVF.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Geist-Mono";
+ src: url("/fonts/GeistMonoVF.woff") format("woff");
+}
+
+//Global Styles
+
+:root {
+ --theme-font-base: "Geist", "Inter", "Arial", sans-serif;
+ --theme-font-mono: "Geist-Mono", monospace;
+ --theme-font-size-base: 15px;
+ --theme-font-size-sm: 13px;
+ --theme-font-size-lg: 18px;
+ --ifm-font-weight-semibold: 600;
+ --ifm-font-family-base: var(--theme-font-base);
+ --ifm-heading-font-family: var(--theme-font-base);
+ --ifm-font-family-monospace: var(--theme-font-mono);
+ --ifm-code-font-size: 90%;
+ --ifm-background-color: var(--theme-accent-red);
+}
diff --git a/docs/docs-next/src/styles/theme-light.scss b/docs/docs-next/src/styles/theme-light.scss
new file mode 100644
index 0000000000000..ed1c1fc89f61a
--- /dev/null
+++ b/docs/docs-next/src/styles/theme-light.scss
@@ -0,0 +1,107 @@
+:root {
+ //***LIGHT THEME***
+ --theme-color-background-default: var(--dagster-white);
+ --theme-color-background-light: var(--dagster-gray-10);
+ --theme-color-background-lighter: var(--dagster-gray-100);
+ --theme-color-background-red: var(--dagster-red-translucent-12);
+ --theme-color-background-green: var(--dagster-green-translucent-12);
+ --theme-color-background-blue: var(--dagster-blue-translucent-12);
+ --theme-color-background-yellow: var(--dagster-yellow-translucent-12);
+ --theme-color-background-cyan: var(--dagster-cyan-translucent-12);
+ --theme-color-background-gray: var(--dagster-gray-translucent-12);
+
+ --theme-color-link-default: var(--dagster-blue-700);
+ --theme-color-link-hover: var(--dagster-blue-500);
+
+ --theme-color-text-default: var(--dagster-gray-990);
+ --theme-color-text-light: var(--dagster-gray-700);
+ --theme-color-text-lighter: var(--dagster-gray-550);
+ --theme-color-text-disabled: var(--dagster-gray-400);
+ --theme-color-text-red: var(--dagster-red-700);
+ --theme-color-text-green: var(--dagster-green-700);
+ --theme-color-text-blue: var(--dagster-blue-700);
+ --theme-color-text-yellow: var(--dagster-yellow-700);
+ --theme-color-text-cyan: var(--dagster-cyan-700);
+
+ --theme-color-keyline: var(--dagster-gray-translucent-12);
+ --theme-color-border-default: var(--dagster-gray-200);
+ --theme-color-border-hover: var(--dagster-gray-300);
+
+ --theme-color-accent-primary: var(--dagster-gray-950);
+ --theme-color-accent-primary-hover: var(--dagster-gray-800);
+ --theme-color-accent-reversed: var(--dagster-gray-10);
+ --theme-color-accent-reversed-hover: var(--dagster-white);
+ --theme-color-accent-red: var(--dagster-red-500);
+ --theme-color-accent-red-hover: var(--dagster-red-400);
+ --theme-color-accent-green: var(--dagster-green-500);
+ --theme-color-accent-green-hover: var(--dagster-green-400);
+ --theme-color-accent-blue: var(--dagster-blue-500);
+ --theme-color-accent-blue-hover: var(--dagster-blue-400);
+ --theme-color-accent-yellow: var(--dagster-yellow-500);
+ --theme-color-accent-yellow-hover: var(--dagster-yellow-400);
+ --theme-color-accent-cyan: var(--dagster-cyan-500);
+ --theme-color-accent-cyan-hover: var(--dagster-cyan-400);
+ --theme-color-accent-gray: var(--dagster-gray-500);
+ --theme-color-accent-gray-hover: var(--dagster-gray-400);
+ --theme-color-accent-lavendar: var(--dagster-blue-200);
+ --theme-color-accent-lavendar-hover: var(--dagster-blue-100);
+
+ // modified base colors
+ --ifm-color-primary: var(--theme-color-accent-primary);
+ --ifm-color-primary-dark: var(--dagster-gray-850);
+ --ifm-color-primary-darker: var(--dagster-gray-900);
+ --ifm-color-primary-darkest: var(--dagster-gray-990);
+ --ifm-color-primary-light: var(--dagster-gray-100);
+ --ifm-color-primary-lighter: var(--dagster-gray-50);
+ --ifm-color-primary-lightest: var(--dagster-white);
+
+ //App
+ --ifm-background-color: var(--theme-color-background-default);
+ --ifm-link-color: var(--theme-color-link-default);
+ --ifm-toc-link-color: var(--theme-color-text-light);
+ --ifm-toc-border-color: var(--theme-color-keyline);
+ --ifm-navbar-item-padding-vertical: 19px;
+ --ifm-navbar-padding-vertical: 0px;
+ --ifm-navbar-padding-horizontal: 20px;
+ --ifm-navbar-link-color: var(--theme-color-text-light);
+ --ifm-navbar-link-hover-color: var(--theme-color-text-default);
+
+ //Top Navbar
+ --ifm-navbar-height: 60px;
+ --ifm-navbar-background-color: var(--theme-color-background-default);
+ --ifm-navbar-item-padding-horizontal: 8px;
+
+ //Left Menu
+ --ifm-menu-color: var(--theme-color-text-light);
+ --ifm-hover-overlay: var(--dagster-blue-translucent-12);
+ --ifm-menu-color-active: var(--dagster-blue-700);
+
+ // docusaurus
+ --docusaurus-highlighted-code-line-bg: var(--theme-background-light);
+
+ // infima shadow levels
+ // generated from https://www.joshwcomeau.com/shadow-palette/
+ --shadow-color: 0deg 0% 63%;
+ --shadow-elevation-low: 0px 1px 1px hsl(var(--shadow-color) / 0.07),
+ 0px 1.4px 1.4px -1.8px hsl(var(--shadow-color) / 0.06),
+ -0.1px 3px 2.9px -3.5px hsl(var(--shadow-color) / 0.04);
+ --shadow-elevation-medium: 0px 1px 1px hsl(var(--shadow-color) / 0.06),
+ 0px 1.8px 1.7px -0.9px hsl(var(--shadow-color) / 0.05),
+ -0.1px 3.5px 3.4px -1.8px hsl(var(--shadow-color) / 0.05),
+ -0.1px 7.5px 7.3px -2.7px hsl(var(--shadow-color) / 0.04),
+ -0.3px 15px 14.5px -3.5px hsl(var(--shadow-color) / 0.03);
+ --shadow-elevation-high: 0px 1px 1px hsl(var(--shadow-color) / 0.06),
+ 0px 2.1px 2px -0.4px hsl(var(--shadow-color) / 0.05),
+ -0.1px 3.4px 3.3px -0.8px hsl(var(--shadow-color) / 0.05),
+ -0.1px 5.2px 5px -1.2px hsl(var(--shadow-color) / 0.05),
+ -0.1px 7.9px 7.6px -1.6px hsl(var(--shadow-color) / 0.04),
+ -0.2px 12px 11.6px -2px hsl(var(--shadow-color) / 0.04),
+ -0.3px 17.9px 17.3px -2.4px hsl(var(--shadow-color) / 0.04),
+ -0.5px 25.9px 25.1px -2.8px hsl(var(--shadow-color) / 0.03),
+ -0.7px 36.5px 35.3px -3.2px hsl(var(--shadow-color) / 0.03),
+ -0.9px 50px 48.4px -3.5px hsl(var(--shadow-color) / 0.03);
+
+ --ifm-global-shadow-lw: var(--shadow-elevation-low);
+ --ifm-global-shadow-md: var(--shadow-elevation-medium);
+ --ifm-global-shadow-tl: var(--shadow-elevation-high);
+}
diff --git a/docs/docs-next/static/img/dagster-docs-logo-dark.svg b/docs/docs-next/static/img/dagster-docs-logo-dark.svg
new file mode 100644
index 0000000000000..10062079d9c3b
--- /dev/null
+++ b/docs/docs-next/static/img/dagster-docs-logo-dark.svg
@@ -0,0 +1,29 @@
+
diff --git a/docs/docs-next/static/img/dagster-docs-logo.svg b/docs/docs-next/static/img/dagster-docs-logo.svg
new file mode 100644
index 0000000000000..79baa887b5391
--- /dev/null
+++ b/docs/docs-next/static/img/dagster-docs-logo.svg
@@ -0,0 +1,29 @@
+
diff --git a/docs/docs-next/static/img/favicon-old.ico b/docs/docs-next/static/img/favicon-old.ico
new file mode 100644
index 0000000000000..c01d54bcd39a5
Binary files /dev/null and b/docs/docs-next/static/img/favicon-old.ico differ
diff --git a/docs/docs-next/static/img/favicon.ico b/docs/docs-next/static/img/favicon.ico
index c01d54bcd39a5..808e54ac055ab 100644
Binary files a/docs/docs-next/static/img/favicon.ico and b/docs/docs-next/static/img/favicon.ico differ