From 0cc0d3567f782a44b1eef4553dda191c572ad62c Mon Sep 17 00:00:00 2001
From: pride7 <132001420+pride7@users.noreply.github.com>
Date: Mon, 11 Mar 2024 02:25:23 -0700
Subject: [PATCH] theme: add aqua theme (#13)

* theme: add blue theme

* theme: add blue theme

* Update aqua theme

* theme: add aqua theme
show examples for english and chinese, respectively

* update aqua theme: remove redundant header and footer

* update: improve the code style of aqua theme

* Update aqua.typ

* Update aqua.typ

* Update aqua.typ

* Update aqua-zh.typ

---------

Co-authored-by: OrangeX4 <34951714+OrangeX4@users.noreply.github.com>
---
 examples/aqua-zh.typ |  50 ++++++++++
 examples/aqua.typ    |  42 +++++++++
 themes/aqua.typ      | 215 +++++++++++++++++++++++++++++++++++++++++++
 themes/themes.typ    |   3 +-
 4 files changed, 309 insertions(+), 1 deletion(-)
 create mode 100644 examples/aqua-zh.typ
 create mode 100644 examples/aqua.typ
 create mode 100644 themes/aqua.typ

diff --git a/examples/aqua-zh.typ b/examples/aqua-zh.typ
new file mode 100644
index 000000000..6b478709e
--- /dev/null
+++ b/examples/aqua-zh.typ
@@ -0,0 +1,50 @@
+#import "../lib.typ": *
+
+#let s = themes.aqua.register(s, aspect-ratio: "16-9", lang: "zh")
+
+#let s = (s.methods.info)(
+  self: s, 
+  title: [An Instruction to Typst-Beamer],
+  author: [Author],
+  date: datetime.today(),
+)
+#let (init, slides) = utils.methods(s)
+#show: init
+
+#set text(font: "Microsoft YaHei") // "Microsoft YaHei" is recommended.
+#let (slide, title-slide, outline-slide, new-section-slide) = utils.slides(s) 
+#show: slides
+
+= 制作一个标题页
+
+#slide[
+  = Typst Beamer 如何做？
+  欢迎阅读 Typst 的中文文档！Typst 是为科学写作而诞生的基于标记的排版系统。 它被设计之初就是作为一种替代品，用于替代像 LaTeX 这样的高级工具，又或者是像 Word 和 Google Docs 这样的简单工具。 我们对 Typst 的目标是构建一个功能强大的排版工具，并且让用户可以愉快地使用它。 
+
+  本文档分为两部分：一个适合初学者的教程，其通过实际用例介绍 Typst；以及一个全面的参考，以解释 Typst 的所有概念和功能。
+
+  我们还邀请您加入我们为 Typst 建立的社区。Typst 仍是一个非常年轻的项目，因此我们非常希望能够得到您的反馈。
+]
+
+= 制作一个目录页
+
+== 标题2
+
+#grid(
+  columns: (1fr,1fr),
+  column-gutter: 50pt,
+  row-gutter: 20pt,
+  [属性 1], [属性 2],
+  [#lorem(20)], [#lorem(20)],
+)
+
+
+== Summary
+
+#align(center + horizon)[
+  #set text(size: 3em, weight: "bold", s.colors.primary)
+
+  THANKS FOR ALL
+
+  敬请指正！
+]
diff --git a/examples/aqua.typ b/examples/aqua.typ
new file mode 100644
index 000000000..76f01c484
--- /dev/null
+++ b/examples/aqua.typ
@@ -0,0 +1,42 @@
+#import "../lib.typ": *
+
+#let s = themes.aqua.register(s, aspect-ratio: "16-9")
+
+#let s = (s.methods.info)(
+  self: s, 
+  title: [An Instruction to Typst-Beamer],
+  author: [Author],
+  date: datetime.today(),
+)
+#let (init, slides) = utils.methods(s)
+#show: init
+
+#let (slide, title-slide, outline-slide, new-section-slide) = utils.slides(s) 
+#show: slides
+
+= Title Slide
+
+#slide[
+  = How to make Typst-Beamer?
+  #lorem(80)
+]
+
+= Content Slide
+
+== Test for grid
+
+#grid(
+  columns: (1fr, 1fr),
+  column-gutter: 50pt,
+  row-gutter: 20pt,
+  [Feature 1], [Feature 2],
+  [#lorem(20)], [#lorem(20)],
+)
+
+== Summary
+
+#align(center + horizon)[
+  #set text(size: 3em, weight: "bold", s.colors.primary)
+  THANKS FOR ALL
+]
+
diff --git a/themes/aqua.typ b/themes/aqua.typ
new file mode 100644
index 000000000..f9255d1d4
--- /dev/null
+++ b/themes/aqua.typ
@@ -0,0 +1,215 @@
+#import "../utils/utils.typ"
+#import "../utils/states.typ"
+#import "../utils/components.typ"
+
+#let title-slide(self: none, ..args) = {
+  self = utils.empty-page(self)
+  self.page-args = self.page-args + (
+    margin: (top: 30%, left: 17%, right: 17%, bottom: 0%),
+    background: utils.call-or-display(self, self.aqua-background),
+  )
+  let info = self.info + args.named()
+
+  let content = {
+    set align(center)
+    stack(
+      spacing: 3em,
+      if info.title != none {
+        text(size: 48pt, weight: "bold", fill: self.colors.primary, info.title)
+      },
+      if info.author != none {
+        text(fill: self.colors.primary-light, size: 28pt, weight: "regular", info.author)
+      },
+      if info.date != none {
+        text(
+          fill: self.colors.primary-light,
+          size: 20pt, 
+          weight: "regular",
+          if type(info.date) == datetime { info.date.display(self.datetime-format) } else { info.date },
+        )
+      }
+    )
+  }
+  (self.methods.touying-slide)(self: self, repeat: none, content)
+}
+
+#let outline-slide(self: none, enum-args: (:), leading: 50pt) = {
+  self = utils.empty-page(self)
+  self.page-args = self.page-args + (
+    background: utils.call-or-display(self, self.aqua-background),
+  )
+  set text(size: 30pt, fill: self.colors.primary)
+  set par(leading: leading)
+
+  let body = {
+    grid(
+      columns: (1fr, 1fr),
+      rows: (1fr),
+      align(
+        center + horizon,
+        {
+          set par(leading: 20pt)
+          if self.aqua-lang == "zh" {
+            text(
+              size: 80pt, 
+              weight: "bold",
+              [#text(size:36pt)[CONTENTS]\ 目录]
+            )
+          } else if self.aqua-lang == "en" {
+            text(
+              size: 48pt, 
+              weight: "bold",
+              [CONTENTS]
+            )
+          }
+        }
+      ),
+      align(
+        left + horizon,
+        {
+          set par(leading: leading)
+          set text(weight: "bold")
+          (self.methods.touying-outline)(self: self, enum-args: (numbering: "01", ..enum-args))
+        }
+      )
+    )
+  }
+  (self.methods.touying-slide)(self: self, repeat: none, body)
+}
+
+#let new-section-slide(self: none, section) = {
+  self = utils.empty-page(self)
+  self.page-args = self.page-args + (
+    margin: (left:0%, right:0%, top: 20%, bottom:0%),
+    background: utils.call-or-display(self, self.aqua-background),
+  )
+  let body = {
+    stack(
+      dir: ttb,
+      spacing: 12%,
+      align(
+        center,
+        text(
+          fill: self.colors.primary,
+          size: 166pt,
+          states.current-section-number(numbering: "01")
+        )
+      ),
+      align(
+        center,
+        text(
+          fill: self.colors.primary,
+          size: 60pt,
+          weight: "bold",
+          section
+        )
+      )
+    ) 
+  }
+  (self.methods.touying-slide)(self: self, repeat: none, section: section, body)
+}
+
+#let slide(self: none, title: auto, ..args) = {
+  if title != auto {
+    self.aqua-title = title
+  }
+  (self.methods.touying-slide)(
+    self: self,
+    setting: body => {
+      show heading.where(level:1): body => text(fill: self.colors.primary-light)[#body#v(3%)]
+      body
+    },
+    ..args,
+  )
+}
+
+#let slides(self: none, title-slide: true, outline-slide: true, slide-level: 1, ..args) = {
+  if title-slide {
+    (self.methods.title-slide)(self: self)
+  }
+  if outline-slide {
+    (self.methods.outline-slide)(self: self)
+  }
+  (self.methods.touying-slides)(self: self, slide-level: slide-level, ..args)
+}
+
+#let register(
+  aspect-ratio: "16-9",
+  lang: "en",
+  self,
+) = {
+  assert(lang in ("zh", "en"), message: "lang must be 'zh' or 'en'")
+
+  self = (self.methods.colors)(
+    self: self,
+    primary: rgb("#003F88"),
+    primary-light: rgb("#2159A5"),
+    primary-lightest: rgb("#F2F4F8"),
+  )
+
+  self.aqua-title = {
+    states.current-section-number(numbering: "01")
+    [ ]
+    states.current-section-title
+  }
+  self.aqua-lang = lang
+  self.aqua-background = (self) => {
+    place(left + top, dx: -15pt, dy: -26pt,
+      circle(radius: 40pt, fill: self.colors.primary))
+    place(left + top, dx: 65pt, dy: 12pt,
+      circle(radius: 21pt, fill: self.colors.primary))
+    place(left + top, dx: 3%, dy: 15%,
+      circle(radius: 13pt, fill: self.colors.primary))
+    place(left + top, dx: 2.5%, dy: 27%,
+      circle(radius: 8pt, fill: self.colors.primary))
+    place(right + bottom, dx: 15pt, dy: 26pt,
+      circle(radius: 40pt, fill: self.colors.primary))
+    place(right + bottom, dx: -65pt, dy: -12pt,
+      circle(radius: 21pt, fill: self.colors.primary))
+    place(right + bottom, dx: -3%, dy: -15%,
+      circle(radius: 13pt, fill: self.colors.primary))
+    place(right + bottom, dx: -2.5%, dy: -27%,
+      circle(radius: 8pt, fill: self.colors.primary))
+    polygon(fill: self.colors.primary-lightest,
+      (35%, -17%), (70%, 10%), (35%, 30%), (0%, 10%))
+    place(center + horizon, dy: 7%,
+      ellipse(fill: white, width: 45%, height: 120pt))
+    place(center + horizon, dy: 5%,
+      ellipse(fill: self.colors.primary-lightest, width: 40%, height: 80pt))
+    place(center + horizon, dy: 12%,
+      rect(fill: self.colors.primary-lightest, width: 40%, height: 60pt))
+    place(center + horizon, dy: 20%,
+      ellipse(fill: white, width: 40%, height: 70pt))
+    place(center + horizon, dx: 28%, dy: -6%,
+      circle(radius: 13pt, fill: white))
+  }
+  let header(self) = {
+    place(center + top, dy: 45%,
+      rect(width: 100%, height: 100%, fill: self.colors.primary))
+    place(left + top, line(start: (30%, 30%), end: (27%, 200%), stroke: 7pt + white))
+    place(left + bottom, dx: 4%, dy: 15%,
+      text(fill:white, self.aqua-title))
+  }
+  let footer(self) = {
+    set text(size: 0.8em)
+    place(right, dx: -5%, states.slide-counter.display())
+  }
+  self.page-args += (
+    paper: "presentation-" + aspect-ratio,
+    margin: (x: 0em, top: 10%, bottom: 10%),
+    header: header,
+    footer: footer,
+  )
+  self.padding += (x: 5%, top: 7%)
+  self.methods.init = (self: none, body) => {
+    set text(size: 20pt)
+    body
+  }
+  self.methods.title-slide = title-slide
+  self.methods.outline-slide = outline-slide
+  self.methods.new-section-slide = new-section-slide
+  self.methods.touying-new-section-slide = new-section-slide
+  self.methods.slide = slide
+  self.methods.slides = slides
+  self
+}
diff --git a/themes/themes.typ b/themes/themes.typ
index 16eab5fa7..3ec07d35b 100644
--- a/themes/themes.typ
+++ b/themes/themes.typ
@@ -1,4 +1,5 @@
 #import "simple.typ"
 #import "metropolis.typ"
 #import "dewdrop.typ"
-#import "university.typ"
\ No newline at end of file
+#import "university.typ"
+#import "aqua.typ"
\ No newline at end of file