comparable examples for brand yaml

similar in spirit to feature-format matrix comparison
but there are so many feature-element combinations
that it's not feasible to demonstrate them individually

the aim is to have full-enough coverage of all feature-element options over
a small number of visual tests

Author: gordonwoodhull

tests/docs/brand-yaml/kitchen-sink/_brand.yml

@@ -2,13 +2,6 @@ color:
   palette:
     red: "#FF0000"
     black: "#002040"
-    #    white: "#e6f8ff"
-    branded-base-foreground: "#27262e"
-    branded-headings-foreground: "#042f02"
-    branded-monospace-inline-foreground: rgb(8, 111, 15)
-    branded-monospace-inline-background: rgb(255, 250, 224)
-    branded-monospace-block-foreground: "#eee"
-    branded-monospace-block-background: "#0a3c07"
 
   primary: red
   foreground: black
@@ -31,7 +24,7 @@ typography:
   base:
     family: EB Garamond
     # sass fails to typecheck
-    #size: 12pt
+    size: 12pt
     weight: 400
     color: "#21f"
     line-height: 0.9
@@ -42,23 +35,17 @@ typography:
     color: "#2c2"
   monospace:
     family: Space Mono
-    color: "#f32"
-    background-color: white
   monospace-inline:
     size: 20px
     weight: 700
+    color: "#f32"
+    background-color: white
   monospace-block:
     weight: 400
     size: 8pt
     line-height: 2
-  # does not work in revealjs
-  # monospace-inline:
-  #   color: branded-monospace-inline-foreground
-  #   background-color: branded-monospace-inline-background
-  # monospace-block:
-  #   color: branded-monospace-block-foreground
-  #   weight: 400
-  #   background-color: branded-monospace-block-background
+    color: "#eee"
+    background-color: "#0a3c07"
   link:
     color: "#a2f"
     weight: 700

tests/docs/brand-yaml/kitchen-sink/brand-typography.qmd

@@ -14,11 +14,19 @@ format:
 
 ## heading-2 is gothic a1 italic 700
 
-Paragraph is blue eb garamond normal 400 with line-height 0.9; currently we get a sass compilation error if we set base.size to an absolute length unit.
+Paragraph is 12pt blue eb garamond normal 400 with line-height 0.9.
 
-Here's a monospace inline in space mono normal 700 20px:  `fib(90) // in red on white` \
-and here's a monospace block in space mono normal 400 8pt with line-height 2:
+Here's a monospace inline in 20px space mono normal 700, red on white:  `fib(90)` \
+and here's a monospace block in 8pt space mono normal 400, white on dark green, with line-height 2:
 
+:::{.sourceCode}
+```
+const fib = num => num < 2 ? num : fib(num-1) + fib(num - 2);
+console.log(fib(12));
+```
+:::
+
+Syntax highlighting makes colors more complicated:
 ```javascript
 const fib = num => num < 2 ? num : fib(num-1) + fib(num - 2);
 console.log(fib(12))

tests/docs/brand-yaml/monospace-colors/_brand.yml

@@ -0,0 +1,9 @@
+color:
+  ## ERROR: Expecting punctuation: "}" if no palette
+  palette:
+    orangeblue: "#ccc"
+  background: "#e6f8ff"
+typography:
+  monospace:
+    color: "#eee"
+    background-color: "#0a3c07"

tests/docs/brand-yaml/monospace-colors/brand-typography.qmd

@@ -0,0 +1,30 @@
+---
+title: monospace colors
+format:
+  typst:
+    keep-typ: true
+    include-in-header:
+      text: |
+        #set text(fallback: false, weight: 100)
+  dashboard: default
+  html: default
+  revealjs: default
+---
+
+We're using only `brand.typography.monospace.color` and `.background-color`.
+
+Raw inlines `3 * fib(5)` and raw blocks will inherit the same colors, off-white and dark green.
+
+:::{.sourceCode}
+```
+const fib = num => num < 2 ? num : fib(num-1) + fib(num - 2);
+console.log(fib(12))
+```
+:::
+
+Syntax highlighting complicates things.
+
+```javascript
+const fib = num => num < 2 ? num : fib(num-1) + fib(num - 2);
+console.log(fib(12))
+```

tests/docs/brand-yaml/palette-colors/_brand.yml

@@ -0,0 +1,18 @@
+color:
+  ## ERROR: Expecting punctuation: "}" if no palette
+  palette:
+    orangeblue: "#ccc"
+    branded-monospace-inline-foreground: rgb(8, 111, 15)
+    branded-monospace-inline-background: rgb(255, 250, 224)
+    branded-monospace-block-foreground: "#E7DADA"
+    branded-monospace-block-background: rgb(14, 85, 10)
+  background: "#e6f8ff"
+typography:
+  # does not work in revealjs
+  monospace-inline:
+    color: branded-monospace-inline-foreground
+    background-color: branded-monospace-inline-background
+  monospace-block:
+    color: branded-monospace-block-foreground
+    weight: 400
+    background-color: branded-monospace-block-background

tests/docs/brand-yaml/palette-colors/brand-typography.qmd

@@ -0,0 +1,32 @@
+---
+title: colors from brand palette
+format:
+  typst:
+    keep-typ: true
+    include-in-header:
+      text: |
+        #set text(fallback: false, weight: 100)
+  dashboard: default
+  html: default
+  revealjs: default
+---
+
+We're setting `color` and `background-color` on `brand.typography.monospace-inline` and `.monospace-block` to named colors in the `brand.color.palette`.
+
+Raw inlines `3 * fib(5)` are displayed in green on yellow.
+
+Raw blocks are displayed in pink grey on dark green.
+
+:::{.sourceCode}
+```
+const fib = num => num < 2 ? num : fib(num-1) + fib(num - 2);
+console.log(fib(12))
+```
+:::
+
+Syntax highlighting complicates things.
+
+```javascript
+const fib = num => num < 2 ? num : fib(num-1) + fib(num - 2);
+console.log(fib(12))
+```