diff --git a/README.md b/README.md index 14277c1a..cfd74975 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@

`typst.ts` is a project dedicated to bring the power of [Typst](https://github.com/typst/typst) to the world of JavaScript. In short, it provides an `typst::World` implementation and several exporters to help compile and render your Typst document. In the scope of server-side rendering collaborated by -$\textcolor{#2ecc40}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this: +$\textcolor{#3c9123}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this:

diff --git a/docs/cookery/introduction.typ b/docs/cookery/introduction.typ index 8f8c8df3..ca259b6f 100644 --- a/docs/cookery/introduction.typ +++ b/docs/cookery/introduction.typ @@ -5,7 +5,7 @@ = Introduction -Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: green, "server") and #text(fill: blue, "browser"), there would be a data flow like this basically: +Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: rgb("#3c9123"), "server") and #text(fill: blue, "browser"), there would be a data flow like this basically: #figure( { diff --git a/github-pages/docs/data-flow-standalone.artifact.svg b/github-pages/docs/data-flow-standalone.artifact.svg index ace908a9..b18b5cdb 100644 --- a/github-pages/docs/data-flow-standalone.artifact.svg +++ b/github-pages/docs/data-flow-standalone.artifact.svg @@ -69,4 +69,4 @@ svg { margin: -1.5vw; } } -↑precompile with theme and screen settings↑compile to svg †↑directly render †·‡↑render to svg ‡↑↑render to canvas ‡Typst DocumentsPreprocessed ArtifactSVG Document ( <svg/> )Canvas ( <canvas/> )Browser-side module needed: †: compiler; ‡: renderer. \ No newline at end of file +↑precompile with theme and screen settings↑compile to svg †↑directly render †·‡↑render to svg ‡↑↑render to canvas ‡Typst DocumentsPreprocessed ArtifactSVG Document ( <svg/> )Canvas ( <canvas/> )Browser-side module needed: †: compiler; ‡: renderer. \ No newline at end of file diff --git a/github-pages/docs/data-flow-standalone.dark.typ b/github-pages/docs/data-flow-standalone.dark.typ index eaa631e1..024ace1a 100644 --- a/github-pages/docs/data-flow-standalone.dark.typ +++ b/github-pages/docs/data-flow-standalone.dark.typ @@ -6,7 +6,7 @@ #show link: underline #figure( - data-flow-graph(stroke: white, bg-color: rgb(13, 17, 23)), + data-flow-graph(stroke: white, bg-color: rgb(13, 17, 23), light-theme: false), caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ], numbering: none, ) diff --git a/github-pages/docs/data-flow-standalone.typ b/github-pages/docs/data-flow-standalone.typ index 096847ce..25f1bdec 100644 --- a/github-pages/docs/data-flow-standalone.typ +++ b/github-pages/docs/data-flow-standalone.typ @@ -5,7 +5,7 @@ #show link: underline #figure( - data-flow-graph(stroke: black, bg-color: white), + data-flow-graph(stroke: black, bg-color: white, light-theme: true), caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ], numbering: none, ) diff --git a/github-pages/docs/data-flow.typ b/github-pages/docs/data-flow.typ index e26acd47..6d8cd064 100644 --- a/github-pages/docs/data-flow.typ +++ b/github-pages/docs/data-flow.typ @@ -1,8 +1,21 @@ #import "/contrib/typst/diagram.typ": node, arr, commutative_diagram -#import "/docs/cookery/templates/page.typ": main-color, background-color +#import "/docs/cookery/templates/page.typ": main-color, background-color, is-light-theme -#let data-flow-graph(stroke: main-color, bg-color: background-color) = { +#let forest = rgb("43a127") + +#let data-flow-graph( + stroke: main-color, + bg-color: background-color, + light-theme: is-light-theme, +) = { let arr = arr.with(stroke: stroke) + + let adj-green = if light-theme { + forest.darken(10%) + } else { + green + } + commutative_diagram( node_padding: (70pt, 50pt), bg-color: bg-color, @@ -19,11 +32,11 @@ #link("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas")[Canvas] ( `` ) ]), arr((0, 0), (0, 2), [ - #set text(fill: green) + #set text(fill: adj-green) `precompile with theme and screen settings` ]), arr((0, 0), (1, 1), label_pos: 0.8em, { - set text(fill: green) + set text(fill: adj-green) rotate(17deg)[ `compile to svg` #set text(fill: blue) diff --git a/github-pages/docs/readme-draft.typ b/github-pages/docs/readme-draft.typ index cee963a9..eb4f3c98 100644 --- a/github-pages/docs/readme-draft.typ +++ b/github-pages/docs/readme-draft.typ @@ -50,7 +50,7 @@ #show: project -Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: green, "server") and #text(fill: blue, "browser"), there would be a data flow like this: +Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: rgb("#3c9123"), "server") and #text(fill: blue, "browser"), there would be a data flow like this: #figure( data-flow-graph(),