diff --git a/docs/docs-next/src/css/custom.css b/docs/docs-next/src/css/custom.css
deleted file mode 100644
index 2bc6a4cfdef4e..0000000000000
--- a/docs/docs-next/src/css/custom.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
-:root {
- --ifm-color-primary: #2e8555;
- --ifm-color-primary-dark: #29784c;
- --ifm-color-primary-darker: #277148;
- --ifm-color-primary-darkest: #205d3b;
- --ifm-color-primary-light: #33925d;
- --ifm-color-primary-lighter: #359962;
- --ifm-color-primary-lightest: #3cad6e;
- --ifm-code-font-size: 95%;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
- --ifm-color-primary: #25c2a0;
- --ifm-color-primary-dark: #21af90;
- --ifm-color-primary-darker: #1fa588;
- --ifm-color-primary-darkest: #1a8870;
- --ifm-color-primary-light: #29d5b0;
- --ifm-color-primary-lighter: #32d8b4;
- --ifm-color-primary-lightest: #4fddbf;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
diff --git a/docs/docs-next/src/styles/components/_card.scss b/docs/docs-next/src/styles/components/_card.scss
new file mode 100644
index 0000000000000..1b1079065bba6
--- /dev/null
+++ b/docs/docs-next/src/styles/components/_card.scss
@@ -0,0 +1,3 @@
+.card {
+ border-radius: 0px;
+}
diff --git a/docs/docs-next/src/styles/custom.scss b/docs/docs-next/src/styles/custom.scss
new file mode 100644
index 0000000000000..d8db769ed82b6
--- /dev/null
+++ b/docs/docs-next/src/styles/custom.scss
@@ -0,0 +1,256 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+
+:root {
+ // 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: 95%;
+ --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-mid);
+ --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: rgb(217, 220, 222);
+
+ // 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);
+}
+
+.hero {
+ &--electron {
+ color: var(--dagster-color-light);
+ background: var(--dagster-color-dark);
+ }
+}
+
+.theme-doc-markdown {
+ max-width: 700px;
+ margin: 0 auto;
+ margin-top: 2rem;
+}
+
+.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 auto;
+ }
+
+ &__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: 2px solid transparent;
+
+ &--active {
+ color: var(--dagster-color-light);
+ border-bottom-color: var(--ifm-link-color);
+ }
+ }
+}
+
+.footer {
+ &--dark {
+ --ifm-footer-background-color: var(--dagster-color-gray-900);
+ }
+
+ .footer__logo {
+ max-width: 80px;
+ }
+}
+
+.markdown {
+ a {
+ font-weight: var(--ifm-font-weight-bold);
+ code {
+ font-weight: var(--ifm-font-weight-bold);
+ }
+ }
+
+ p {
+ line-height: 180%;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ --ifm-h2-font-size: 1.6rem;
+ --ifm-h3-font-size: 1.2rem;
+ --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);
+ }
+ }
+}
+
+// sidebar
+.menu {
+ &__link {
+ font-size: 0.9rem;
+ font-weight: var(--ifm-font-weight-normal);
+
+ &--active {
+ font-weight: var(--ifm-font-weight-bold);
+ }
+ }
+}
+
+// utility
+.no-select {
+ user-select: none;
+}
+
+.card {
+ border: 1px solid rgba(200, 200, 200, 0.3);
+}
+
+.table-of-contents__link--active {
+ font-weight: var(--ifm-font-weight-bold);
+}
+
+// fix https://github.com/electron/website/issues/539
+.navbar__logo {
+ width: 2rem;
+}
diff --git a/docs/docs-next/src/styles/index.tsx b/docs/docs-next/src/styles/index.tsx
new file mode 100644
index 0000000000000..3ac6698859c8a
--- /dev/null
+++ b/docs/docs-next/src/styles/index.tsx
@@ -0,0 +1,8 @@
+
+export default function HomeWrapper() {
+ return (
+
+
Hello, World!
+
+ );
+}
\ No newline at end of file
diff --git a/docs/docs-next/static/img/logo.svg b/docs/docs-next/static/img/logo.svg
index 9db6d0d066e3d..d2ae628553a7d 100644
--- a/docs/docs-next/static/img/logo.svg
+++ b/docs/docs-next/static/img/logo.svg
@@ -1 +1,11 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/docs-next/tsconfig.json b/docs/docs-next/tsconfig.json
index 314eab8a418b9..1f7a85c8f664b 100644
--- a/docs/docs-next/tsconfig.json
+++ b/docs/docs-next/tsconfig.json
@@ -1,7 +1,16 @@
{
- // This file is not used in compilation. It is here just for a nice editor experience.
- "extends": "@docusaurus/tsconfig",
+ "extends": "./node_modules/@docusaurus/tsconfig/tsconfig.json",
"compilerOptions": {
- "baseUrl": "."
- }
-}
+ "types": [
+ "@docusaurus/theme-classic",
+ "node"
+ ]
+ },
+ "exclude": [
+ "**/node_modules/*",
+ "blog",
+ "docs",
+ "build",
+ "i18n"
+ ],
+}
\ No newline at end of file