PeriodicTable add prop color_overrides

used on new demo page /element-color-schemes to render Jmol and Vesta palettes
add tests for colors.ts
fix link to /bohr-atoms page (thanks @arosen93)

src/lib/PeriodicTable.svelte

@@ -51,6 +51,7 @@
   }[] = tile_props?.show_symbol == false ? [] : default_lanth_act_tiles
   export let lanth_act_style: string = ``
   export let color_scale_range: [number | null, number | null] = [null, null]
+  export let color_overrides: Record<string, string> = {}
 
   type $$Events = PeriodicTableEvents // for type-safe event listening on this component
 
@@ -138,7 +139,7 @@
           : null}
         style="grid-column: {column}; grid-row: {row};"
         {value}
-        bg_color={bg_color(value)}
+        bg_color={color_overrides[symbol] ?? bg_color(value)}
         {active}
         {...tile_props}
         on:mouseenter={set_active_element(element)}

src/routes/(demos)/+layout.svelte

@@ -20,4 +20,7 @@
     place-content: center;
     place-items: center;
   }
+  main :global(h2) {
+    text-align: center;
+  }
 </style>

src/routes/(demos)/element-color-schemes/+page.svx

@@ -0,0 +1,21 @@
+## Element Color Schemes
+
+```svelte example
+<script>
+  import { PeriodicTable } from '$lib'
+  import { element_color_schemes } from '$lib/colors'
+</script>
+
+{#each Object.entries(element_color_schemes) as [id, scheme]}
+  <h3 {id}>{id}</h3>
+  <PeriodicTable color_overrides={scheme} />
+{/each}
+
+<style>
+  h3 {
+    text-align: center;
+    margin: 2em 0 -2em -20cqw;
+    font-size: 5cqw;
+  }
+</style>
+```

src/routes/+page.svelte

@@ -59,7 +59,7 @@
 >
   {#if $last_element && window_width > 1100}
     {@const { shells, name, symbol } = $last_element}
-    <a href="bohr-atom">
+    <a href="bohr-atoms">
       <BohrAtom {shells} name="Bohr Model of {name}" {symbol} style="width: 250px" />
     </a>
   {/if}

tests/unit/colors.test.ts

@@ -0,0 +1,8 @@
+import { element_color_schemes } from '$lib/colors'
+import { expect, test } from 'vitest'
+
+test(`element_color_schemes`, () => {
+  for (const [scheme, colors] of Object.entries(element_color_schemes)) {
+    expect(Object.keys(colors).length, scheme).toBeGreaterThan(108)
+  }
+})