From a9f41094ca698bfb543e9d33a0e619b042dc6603 Mon Sep 17 00:00:00 2001 From: Josh Braun Date: Wed, 14 Aug 2024 12:08:32 -0400 Subject: [PATCH 1/4] update favicon --- docs/docs-next/static/img/favicon-old.ico | Bin 0 -> 3626 bytes docs/docs-next/static/img/favicon.ico | Bin 3626 -> 4286 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 docs/docs-next/static/img/favicon-old.ico 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 0000000000000000000000000000000000000000..c01d54bcd39a5f853428f3cd5aa0f383d963c484 GIT binary patch literal 3626 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 d6BwKS4!W4oJK|%Np0YpXc!g*;5{tE>BSvddz literal 3626 zcmb`Je@s(X6vrR`EK3%b%orErlDW({vnABqA zcfaS{d+xbU5JKp0*;0YOg+;Fl!eT)XRuapIwFLL`=imZCSon$`se`_<%@MB=M~KG+ z=EW^FL`w|Bo>*ktlaS^(fut!95`iG5u=SZ8nfDHO#GaTlH1-XG^;vsjUb^gWTVz0+ z^=WR1wv9-2oeR=_;fL0H7rNWqAzGtO(D;`~cX(RcN0w2v24Y8)6t`cS^_ghs`_ho? z{0ka~1Dgo8TfAP$r*ua?>$_V+kZ!-(TvEJ7O2f;Y#tezt$&R4 zLI}=-y@Z!grf*h3>}DUL{km4R>ya_I5Ag#{h_&?+HpKS!;$x3LC#CqUQ8&nM?X))Q zXAy2?`YL4FbC5CgJu(M&Q|>1st8XXLZ|5MgwgjP$m_2Vt0(J z&Gu7bOlkbGzGm2sh?X`){7w69Y$1#@P@7DF{ZE=4%T0NDS)iH`tiPSKpDNW)zmtn( zw;4$f>k)4$LBc>eBAaTZeCM2(iD+sHlj!qd z2GjRJ>f_Qes(+mnzdA^NH?^NB(^o-%Gmg$c8MNMq&`vm@9Ut;*&$xSD)PKH{wBCEC z4P9%NQ;n2s59ffMn8*5)5AAg4-93gBXBDX`A7S& zH-|%S3Wd%T79fk-e&l`{!?lve8_epXhE{d3Hn$Cg!t=-4D(t$cK~7f&4s?t7wr3ZP z*!SRQ-+tr|e1|hbc__J`k3S!rMy<0PHy&R`v#aJv?`Y?2{avK5sQz%=Us()jcNuZV z*$>auD4cEw>;t`+m>h?f?%VFJZj8D|Y1e_SjxG%J4{-AkFtT2+ZZS5UScS~%;dp!V>)7zi`w(xwSd*FS;Lml=f6hn#jq)2is4nkp+aTrV?)F6N z>DY#SU0IZ;*?Hu%tSj4edd~kYNHMFvS&5}#3-M;mBCOCZL3&;2obdG?qZ>rD|zC|Lu|sny76pn2xl|6sk~Hs{X9{8iBW zwiwgQt+@hi`FYMEhX2 Date: Wed, 14 Aug 2024 12:08:58 -0400 Subject: [PATCH 2/4] apply geist everywhere --- docs/docs-next/src/styles/custom.scss | 447 +++++++++++++------------- 1 file changed, 224 insertions(+), 223 deletions(-) diff --git a/docs/docs-next/src/styles/custom.scss b/docs/docs-next/src/styles/custom.scss index dfddbc1be8f52..f4e22a339631c 100644 --- a/docs/docs-next/src/styles/custom.scss +++ b/docs/docs-next/src/styles/custom.scss @@ -4,272 +4,273 @@ * work well for content-centric websites. */ @font-face { - font-family: 'Geist'; - src: url('/fonts/GeistVF.woff') format('woff'); + font-family: "Geist"; + src: url("/fonts/GeistVF.woff") format("woff"); } @font-face { - font-family: 'Geist-Mono'; - src: url('/fonts/GeistMonoVF.woff') format('woff'); + font-family: "Geist-Mono"; + src: url("/fonts/GeistMonoVF.woff") format("woff"); } /* 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: 90%; - --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); + --ifm-font-family-base: "Geist", "Inter", "Arial", sans-serif; + --ifm-heading-font-family: "Geist", "Inter", "Arial", sans-serif; + --ifm-font-family-monospace: "Geist-Mono", monospace; + + // 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: 90%; + --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); + // 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); +} /* 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(--dagster-color-red); } .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-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); + } + } } .footer { - &--dark { - --ifm-footer-background-color: var(--dagster-color-gray-900); - } + &--dark { + --ifm-footer-background-color: var(--dagster-color-gray-900); + } - .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); - } - } + &__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); + } + } } .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); + } } From 6acee21ebfecdbf4d5651620924e405d98b2bb8a Mon Sep 17 00:00:00 2001 From: Josh Braun Date: Thu, 15 Aug 2024 18:16:03 -0400 Subject: [PATCH 3/4] set up themes --- docs/docs-next/src/styles/colors.scss | 125 ++++++++++++++ docs/docs-next/src/styles/custom.scss | 166 +++---------------- docs/docs-next/src/styles/theme-dark.scss | 63 +++++++ docs/docs-next/src/styles/theme-globals.scss | 25 +++ docs/docs-next/src/styles/theme-light.scss | 107 ++++++++++++ 5 files changed, 344 insertions(+), 142 deletions(-) create mode 100644 docs/docs-next/src/styles/colors.scss create mode 100644 docs/docs-next/src/styles/theme-dark.scss create mode 100644 docs/docs-next/src/styles/theme-globals.scss create mode 100644 docs/docs-next/src/styles/theme-light.scss 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 f4e22a339631c..5a2133ad69aa8 100644 --- a/docs/docs-next/src/styles/custom.scss +++ b/docs/docs-next/src/styles/custom.scss @@ -3,141 +3,18 @@ * 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", "Inter", "Arial", sans-serif; - --ifm-heading-font-family: "Geist", "Inter", "Arial", sans-serif; - --ifm-font-family-monospace: "Geist-Mono", monospace; - - // 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: 90%; - --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 { @@ -149,13 +26,12 @@ html { /* 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); + --ifm-navbar-link-color: var(--theme-color-text-default); } &__inner { @@ -166,9 +42,7 @@ a.pyobject { &__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); + border: 1px; } &__link { @@ -176,16 +50,14 @@ a.pyobject { border-bottom: 3px solid transparent; &--active { - color: var(--dagster-color-light); - border-bottom-color: var(--ifm-link-color); + 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; @@ -247,13 +119,23 @@ a.pyobject { // sidebar .menu { + 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-bold); - color: var(--dagster-color-blurple-dark); + 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); + } } } } 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); +} From 0d16f493369df14a4f189eda8994ede3de5d8a5f Mon Sep 17 00:00:00 2001 From: Josh Braun Date: Thu, 15 Aug 2024 18:16:10 -0400 Subject: [PATCH 4/4] update logos --- docs/docs-next/docusaurus.config.ts | 312 +++++++++--------- .../static/img/dagster-docs-logo-dark.svg | 29 ++ .../static/img/dagster-docs-logo.svg | 29 ++ 3 files changed, 213 insertions(+), 157 deletions(-) create mode 100644 docs/docs-next/static/img/dagster-docs-logo-dark.svg create mode 100644 docs/docs-next/static/img/dagster-docs-logo.svg 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/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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +