Merge pull request #4 from kazuyanagimoto/brand

Support brand.yml
kazuyanagimoto · Jan 26, 2025 · 3e392b1 · 3e392b1
2 parents 96ebb77 + 1ddbcdd
commit 3e392b1
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 *.pdf
 /.luarc.json
-/template.typ
+/template*.typ
 README.html
 .Rproj.user
 docs/

diff --git a/_extensions/clean/_extension.yml b/_extensions/clean/_extension.yml
@@ -1,7 +1,7 @@
 title: Quarto Clean Theme
 author: Kazuharu Yanagimoto
-version: 0.2.2
-quarto-required: ">=1.5.0"
+version: 0.3.0
+quarto-required: ">=1.6.40"
 contributes:
   format:
     typst:

diff --git a/_extensions/clean/typst-show.typ b/_extensions/clean/typst-show.typ
@@ -3,38 +3,61 @@
   $if(handout)$
     handout: true,
   $endif$
+  // Typography ---------------------------------------------------------------
   $if(fontsize)$
     font-size: $fontsize$,
+  $elseif(brand.typography.base.size)$,
+    font-size: $brand.typography.base.size$,
   $endif$
   $if(sansfont)$
-    font-heading: ("$sansfont$",),
+    font-family-heading: ("$sansfont$",),
+  $elseif(brand.typography.headings.family)$
+    font-family-heading: ("$brand.typography.headings.family$",),
   $endif$
   $if(mainfont)$
-    font-body: ("$mainfont$",),
+    font-family-body: ("$mainfont$",),
+  $elseif(brand.typography.base.family)$
+    font-family-body: ("$brand.typography.base.family$",),
   $endif$
   $if(font-weight-heading)$
     font-weight-heading: "$font-weight-heading$",
+  $elseif(brand.typography.headings.weight)$
+    font-weight-heading: $brand.typography.headings.weight$,
   $endif$
   $if(font-weight-body)$
     font-weight-body: "$font-weight-body$",
   $endif$
+  // Colors --------------------------------------------------------------------
+  $if(jet)$
+    color-jet: rgb("$jet$"),
+  $elseif(brand.color.foreground)$
+    color-jet: brand-color.foreground,
+  $endif$
+  $if(accent)$
+    color-accent: rgb("$accent$"),
+  $elseif(brand.color.primary)$
+    color-accent: brand-color.primary,
+  $endif$
+  $if(accent2)$
+    color-accent2: rgb("$accent2$"),
+  $elseif(brand.color.secondary)$
+    color-accent2: brand-color.secondary,
+  $endif$
+  // Title slide ---------------------------------------------------------------
   $if(font-weight-title)$
-    font-weight-title: "$font-weight-title$",
+    font-weight-title: $font-weight-title$,
+  $elseif(brand.defaults.clean-typst.title-slide.title.weight)$
+    font-weight-title: $brand.defaults.clean-typst.title-slide.title.weight$,
   $endif$
   $if(font-size-title)$
     font-size-title: $font-size-title$,
+  $elseif(brand.defaults.clean-typst.title-slide.title.size)$
+    font-size-title: $brand.defaults.clean-typst.title-slide.title.size$,
   $endif$
   $if(font-size-subtitle)$
     font-size-subtitle: $font-size-subtitle$,
-  $endif$
-  $if(jet)$
-    color-jet: "$jet$",
-  $endif$
-  $if(accent)$
-    color-accent: "$accent$",
-  $endif$
-  $if(accent2)$
-    color-accent2: "$accent2$",
+  $elseif(brand.defaults.clean-typst.title-slide.subtitle.size)$
+    font-size-subtitle: $brand.defaults.clean-typst.title-slide.subtitle.size$,
   $endif$
 )
 

diff --git a/_extensions/clean/typst-template.typ b/_extensions/clean/typst-template.typ
@@ -4,7 +4,7 @@
 #let new-section-slide(self: none, body)  = touying-slide-wrapper(self => {
   let main-body = {
     set align(left + horizon)
-    set text(size: 2.5em, fill: self.colors.primary, weight: "bold")
+    set text(size: 2em, fill: self.colors.primary, weight: "bold", font: self.store.font-family-heading)
     utils.display-current-heading(level: 1)
   }
   self = utils.merge-dicts(
@@ -29,7 +29,7 @@
       size: 1.4em,
       fill: self.colors.neutral-darkest,
       weight: self.store.font-weight-heading,
-      font: self.store.font-heading,
+      font: self.store.font-family-heading,
     )
     utils.call-or-display(self, self.store.header)
   }
@@ -60,20 +60,21 @@
   header: utils.display-current-heading(level: 2),
   footer: [],
   font-size: 20pt,
-  font-heading: ("Roboto"),
-  font-body: ("Roboto"),
+  font-family-heading: ("Roboto"),
+  font-family-body: ("Roboto"),
   font-weight-heading: "light",
   font-weight-body: "light",
   font-weight-title: "light",
+  font-weight-subtitle: "light",
   font-size-title: 1.4em,
   font-size-subtitle: 1em,
-  color-jet: "131516",
-  color-accent: "107895",
-  color-accent2: "9a2515",
+  color-jet: rgb("131516"),
+  color-accent: rgb("107895"),
+  color-accent2: rgb("9a2515"),
   ..args,
   body,
 ) = {
-  set text(size: font-size, font: font-body, fill: rgb(color-jet),
+  set text(size: font-size, font: font-family-body, fill: color-jet,
            weight: font-weight-body)
 
   show: touying-slides.with(
@@ -118,7 +119,7 @@
           set text(
             size: 1.1em,
             fill: self.colors.primary,
-            font: font-body,
+            font: font-family-body,
             weight: "light",
             style: "italic",
           )
@@ -132,20 +133,22 @@
       alert: (self: none, it) => text(fill: self.colors.secondary, it),
     ),
     config-colors(
-      primary: rgb(color-accent),
-      secondary: rgb(color-accent2),
+      primary: color-accent,
+      secondary: color-accent2,
       neutral-lightest: rgb("#ffffff"),
-      neutral-darkest: rgb(color-jet),
+      neutral-darkest: color-jet,
     ),
     // save the variables for later use
     config-store(
       header: header,
       footer: footer,
-      font-heading: font-heading,
+      font-family-heading: font-family-heading,
+      font-family-body: font-family-body,
       font-size-title: font-size-title,
       font-size-subtitle: font-size-subtitle,
-      font-weight-title: font-weight-title,
       font-weight-heading: font-weight-heading,
+      font-weight-title: font-weight-title,
+      font-weight-subtitle: font-weight-subtitle,
       ..args,
     ),
   )
@@ -164,13 +167,16 @@
       [#text(size: self.store.font-size-title,
              fill: self.colors.neutral-darkest,
              weight: self.store.font-weight-title,
+             font: self.store.font-family-heading,
              info.title)
        #if info.subtitle != none {
         linebreak()
         v(-0.3em)
         text(size: self.store.font-size-subtitle,
              style: "italic",
              fill: self.colors.primary,
+             weight: self.store.font-weight-subtitle,
+             font: self.store.font-family-body,
              info.subtitle)
       }]
     )
@@ -231,4 +237,4 @@
   ]
 }
 
-#let button(it) = touying-fn-wrapper(_button.with(it))
+#let button(it) = touying-fn-wrapper(_button.with(it))
diff --git a/template-brand.qmd b/template-brand.qmd
@@ -0,0 +1,102 @@
+---
+title: A title
+subtitle: A subtitle
+format: clean-typst
+author:
+  - name: Your Name
+    orcid: 0000-0000-0000-0000
+    email: [email protected]
+    affiliations: Your Institution
+date: today
+date-format: long
+brand:
+  typography: 
+    fonts: 
+      - family: Montserrat
+        source: google
+      - family: Josefin Sans
+        source: google
+      - family: Fira Code
+        source: bunny
+    base: Montserrat
+    headings:
+      family: Josefin Sans
+      weight: semi-bold
+    monospace:
+      family: Fira Code
+      size: 0.9em
+  color:
+    palette:
+      black: "#131516"
+      green: "#009F8C"
+      pink: "#B75C9D"
+    foreground: black
+    primary: green
+    secondary: pink
+  defaults: 
+    clean-typst:
+      title-slide:
+        title:
+          size: 1.8em
+          weight: 600
+        subtitle:
+          size: 1em
+---
+
+# Section Slide as Header Level 1
+
+## Slide Title as Header Level 2
+
+### Subtitle as Header Level 3
+
+You can put any content here, including text, images, tables, code blocks, etc.
+
+- first unorder list item
+    - A sub item
+
+1. first ordered list item
+    1. A sub item
+
+Next, we'll brief review some theme-specific components.
+
+- Note that _all_ of the standard Quarto + Typst
+[features](https://quarto.org/docs/output-formats/typst.html) 
+can be used with this theme
+- Also, all the [Touying](https://touying-typ.github.io) features can be used by **Typst native code**
+
+## Additional Theme Classes
+
+### Some extra things you can do with the clean theme
+
+Special classes for emphasis
+
+- `.alert` class for default emphasis, e.g. [the second accent color]{.alert}.
+- `.fg` class for custom color, e.g. [with `options='fill: rgb("#5D639E")'`]{.fg options='fill: rgb("#5D639E")'}.
+- `.bg` class for custom background, e.g. [with the default color]{.bg}.
+
+Cross-references
+
+- `.button` class provides a Beamer-like button, e.g.
+[[Summary]{.button}](#sec-summary)
+
+
+## Summary {#sec-summary}
+
+### A Minimalistic Presentation Theme for Quarto + Typst with Touying
+
+Add the theme to an existing project
+
+```{.bash}
+quarto install extension kazuyanagimoto/quarto-clean-typst
+```
+
+... or, create a new project using this slide deck as a lean template
+
+```{.bash}
+quarto use template kazuyanagimoto/quarto-clean-typst
+```
+
+
+### Longer Demo
+
+For a more comprehensive demo, see the [demo slides](https://kazuyanagimoto.com/quarto-slides-typst/slides/quarto-clean-typst/clean.pdf) and [code](https://github.com/kazuyanagimoto/quarto-slides-typst/blob/main/slides/quarto-clean-typst/clean.qmd)!