Design pass (#8)

* first stab at bullet points
* setup theming, custom opacities, use of brand UI colors
* color key change
* delete brand
* setup initial defaults
* Add opacity parameter to primary color
* style TOC
* styling pass header, footer, hints, toc, trademark
* table pass
* style pass, typo, quote, tabs, search, theme, toc

src/components/utils/HexToRgb.tsx

@@ -0,0 +1,21 @@
+export function hexToRgb(hex: string): string {
+    // Remove the hash at the beginning of the hex string if it exists
+    let sanitizedHex = hex.replace('#', '');
+
+    // If the hex is shorthand (3 characters), expand it to 6 characters
+    if (sanitizedHex.length === 3) {
+        sanitizedHex = sanitizedHex
+            .split('')
+            .map((char) => char + char)
+            .join('');
+    }
+
+    // Convert the hex to an integer and extract the RGB components
+    const intVal = parseInt(sanitizedHex, 16);
+    const r = (intVal >> 16) & 255;
+    const g = (intVal >> 8) & 255;
+    const b = intVal & 255;
+
+    // Return the RGB values separated by spaces
+    return `${r} ${g} ${b}`;
+}