feat(style): Add textHighlight theme setting (#1242)

Peter

2024-07-10 b7793bd856979d0515a75c4c7a322912bdb72602

feat(style): Add textHighlight theme setting (#1242)

* Add textHighlight theme setting

* update docs to include textHighlight

* Remove errant `S`

 docs/configuration.md

@@ -53,6 +53,7 @@
    - `secondary`: link colour, current [[graph view|graph]] node
    - `tertiary`: hover states and visited [[graph view|graph]] nodes
    - `highlight`: internal link background, highlighted text, [[syntax highlighting|highlighted lines of code]]
    - `textHighlight`: markdown highlighted text background

## Plugins


 quartz.config.ts

@@ -36,6 +36,7 @@
          secondary: "#284b63",
          tertiary: "#84a59d",
          highlight: "rgba(143, 159, 169, 0.15)",
          textHighlight: "#fff23688",
        },
        darkMode: {
          light: "#161618",
@@ -46,6 +47,7 @@
          secondary: "#7b97aa",
          tertiary: "#84a59d",
          highlight: "rgba(143, 159, 169, 0.15)",
          textHighlight: "#b3aa0288",
        },
      },
    },

 quartz/styles/base.scss

@@ -20,11 +20,10 @@
}

.text-highlight {
  background-color: #fff23688;
  background-color: var(--textHighlight);
  padding: 0 0.1rem;
  border-radius: 5px;
}

::selection {
  background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
  color: var(--darkgray);

 quartz/util/theme.ts

@@ -7,6 +7,7 @@
  secondary: string
  tertiary: string
  highlight: string
  textHighlight: string
}

interface Colors {
@@ -49,6 +50,7 @@
  --secondary: ${theme.colors.lightMode.secondary};
  --tertiary: ${theme.colors.lightMode.tertiary};
  --highlight: ${theme.colors.lightMode.highlight};
  --textHighlight: ${theme.colors.lightMode.textHighlight};

  --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
  --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
@@ -64,6 +66,7 @@
  --secondary: ${theme.colors.darkMode.secondary};
  --tertiary: ${theme.colors.darkMode.tertiary};
  --highlight: ${theme.colors.darkMode.highlight};
  --textHighlight: ${theme.colors.darkMode.textHighlight};
}
`
}