Updating KI theme to KI's recently updated visual identity

NEWS.md

@@ -4,6 +4,8 @@
 
 - Added `mugen_tsukuyomi()` as another alias of `infinite_moon_reader()` (thanks, @DanChaltiel, #359).
 
+- Updated Karolinska Institutet theme to new visual identity (thanks, @ellessenne, #361).
+
 # CHANGES IN xaringan VERSION 0.26
 
 - Added support for embedding media files from `<audio src="...">` and `<video src="...">` in the self-contained mode (thanks, @robertfromont, #355).

inst/examples/ki-demo.Rmd

@@ -1,14 +1,11 @@
 ---
 title: "Karolinska Institutet Theme"
-subtitle: "...powered by xaringan"
-author: "Alessandro Gasparini"
+subtitle: "...powered by [xaringan](https://github.com/yihui/xaringan)"
+author: "Developed by Alessandro Gasparini"
 date: "Last updated: `r Sys.Date()`"
 output:
   xaringan::moon_reader:
     css: ["ki", "ki-fonts"]
-    nature:
-      highlightStyle: solarized-dark
-      countIncrementalSlides: false
 ---
 
 ```{r setup, include = FALSE}
@@ -17,30 +14,28 @@ options(htmltools.dir.version = FALSE)
 
 # Hello World
 
-Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):
+Install the **xaringan** package from CRAN:
 
-```{r eval=FALSE, tidy=FALSE}
-remotes::install_github("yihui/xaringan")
+```{r eval = FALSE, tidy = FALSE}
+install.packages("xaringan")
 ```
 
 --
 
 You are recommended to use the [RStudio IDE](https://www.rstudio.com/products/rstudio/), but you do not have to.
 
-- Create a new R Markdown document from the menu `File -> New File -> R Markdown -> From Template -> Ninja Presentation`;<sup>1</sup>
+- Create a new R Markdown document from the menu `File -> New File -> R Markdown -> From Template -> Ninja Presentation`;
 
 --
 
 - Click the `Knit` button to compile it;
 
 --
 
-- or use the [RStudio Addin](https://rstudio.github.io/rstudioaddins/)<sup>2</sup> "Infinite Moon Reader".
+- or use the [RStudio Addin](https://rstudio.github.io/rstudioaddins/)<sup>1</sup> "Infinite Moon Reader".
 
 .footnote[
-[1] 中文用户请看[这份教程](https://slides.yihui.org/xaringan/zh-CN.html)
-
-[2] See [#2](https://github.com/yihui/xaringan/issues/2) if you do not see the template or addin in RStudio.
+[1] See [#2](https://github.com/yihui/xaringan/issues/2) if you do not see the template or addin in RStudio.
 ]
 
 ---
@@ -49,7 +44,7 @@ You are recommended to use the [RStudio IDE](https://www.rstudio.com/products/rs
 
 The `ki` theme includes extra colours and font sizes.
 
-Colours: .plum[`.plum[]`], .grey[`.grey[]`], .white[`.white[]`], .black[`.black[]`], .cyclamen[`.cyclamen[]`], .main[`.main[]`], .accent[`.accent[]`], .text[`.text[]`], .text-inverse[`.text-inverse[]`].
+Colours: .plum[`.plum[]`], .dark-plum[`.dark-plum[]`], .grey[`.grey[]`], .light-grey[`.light-grey[]`], .white[`.white[]`], .black[`.black[]`], .blackish[`.blackish[]`], .orange[`.orange[]`], .light-orange[`.light-orange[]`], .light-blue[`.light-blue[]`], .main[`.main[]`], .accent[`.accent[]`], .text[`.text[]`], .text-inverse[`.text-inverse[]`].
 
 The colours of the theme can be easily customised - see `ki.css`.
 
@@ -87,8 +82,6 @@ s <- summary(cars)
 s
 ```
 
-As you can see above, the monospaced font supports ligatures.
-
 ---
 
 # Plot
@@ -101,4 +94,6 @@ plot(pressure)
 
 # Disclaimer
 
-The Karolinska Institutet logo is used for dissemination purposes only - please read the webpage with the visual identity guidelines: https://staff.ki.se/download-karolinska-institutets-logo
+The Karolinska Institutet logo is used for dissemination purposes only.
+
+Please read the webpage with the visual identity guidelines before using this template: https://staff.ki.se/brand-platform-and-graphic-profile

inst/rmarkdown/templates/xaringan/resources/ki-fonts.css

@@ -1,16 +1,15 @@
-@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,400i,700&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Fira+Code:400,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono&display=swap');
+
 body {
-  font-family: "Fira Sans", sans-serif;
+  font-family: "DM Sans", sans-serif;
   font-variant-ligatures: common-ligatures;
 }
 
-h1, h2, h3, h4, h5, h6, .remark-slide-number {
-  font-family: "Fira Sans Condensed", sans-serif;
+h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
 }
 
 .remark-code, .remark-inline-code {
-  font-family: "Fira Code", monospace;
+  font-family: "DM Mono", monospace;
 }

inst/rmarkdown/templates/xaringan/resources/ki.css

@@ -3,17 +3,22 @@
   Define KI colours
   */
   --plum: #870052;
-  --cyclamen: #D40963;
-  --grey: #808080;
+  --dark-plum: #4F0433;
+  --orange: #FF876F;
+  --light-orange: #FEEEEB;
+  --light-blue: #EDF4F4;
+  --grey: #666666;
+  --light-grey: #F1F1F1;
   --white: #FFFFFF;
-  --black: #222222;
-  --main: var(--plum);
-  --accent: var(--cyclamen);
-  --text: var(--black);
+  --blackish : rgb(44, 44, 46);
+  --black: #000000;
+  --main: var(--dark-plum);
+  --accent: var(--orange);
+  --text: var(--blackish);
   --text-inverse: var(--white);
-  --highlight: var(--plum);
+  --highlight: var(--dark-plum);
   /*
-  Define font size, to mimick beamer.
+  Define font size, similar to beamer sizes.
   Base font size: 24px
   Calculate relative font sizes:
   round(24 * data.frame(
@@ -54,6 +59,14 @@ h1, h2, h3, h4, h5, h6 {
   margin: 0px;
 }
 
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a  {
+	color: var(--dark-plum);
+}
+
+h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
+	color: var(--orange);
+}
+
 h1 {
   font-size: var(--size-LARGE);
 }
@@ -67,12 +80,15 @@ h3 {
 }
 
 a, a>code, a:visited {
-  color: var(--accent);
+  color: var(--black);
   text-decoration: none;
+  border-bottom: 1px solid var(--accent);
 }
 
 a:hover {
-  text-decoration: underline;
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid var(--accent);
 }
 
 ul {
@@ -112,10 +128,12 @@ ul {
 
 .inverse a {
   text-decoration: underline;
+  border-bottom: none;
 }
 
 .inverse a:hover {
-  text-decoration: underline wavy;
+	color: var(--text-inverse);
+	text-decoration: underline wavy;
 }
 
 .pull-left {
@@ -191,9 +209,9 @@ th, td {
 }
 
 .title-slide {
-  background-image: url(https://user-images.githubusercontent.com/10330005/71024315-eee82b00-2104-11ea-928b-be412b1f3687.png);
+  background-image: url(https://user-images.githubusercontent.com/10330005/196986536-eef93de6-12a6-4626-aacc-85b4d1769b47.png);
   background-position: 97.5% 2.5%;
-  background-size: 10cm;
+  background-size: 8cm;
 }
 
 .title-slide h1 {
@@ -239,8 +257,28 @@ Extra classes for size and color
   color: var(--plum);
 }
 
-.cyclamen {
-  color: var(--cyclamen);
+.dark-plum {
+  color: var(--dark-plum);
+}
+
+.orange {
+  color: var(--orange);
+}
+
+.light-orange {
+  color: var(--light-orange);
+}
+
+.light-blue {
+  color: var(--light-blue);
+}
+
+.grey {
+  color: var(--grey);
+}
+
+.light-grey {
+  color: var(--light-grey);
 }
 
 .white {
@@ -251,8 +289,8 @@ Extra classes for size and color
   color: var(--black);
 }
 
-.grey {
-  color: var(--grey);
+.blackish {
+  color: var(--blackish);
 }
 
 .main {