fix black text color on transparent ElementTiles

janosh · Jul 31, 2023 · 3ace071 · 3ace071
1 parent 14027e3
commit 3ace071
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 164 deletions.
diff --git a/src/lib/element/ElementTile.svelte b/src/lib/element/ElementTile.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ChemicalElement, PeriodicTableEvents } from '$lib'
-  import { get_text_color, pretty_num } from '$lib'
+  import { choose_bw_for_contrast, pretty_num } from '$lib'
   import { last_element } from '$lib/stores'
   import { createEventDispatcher } from 'svelte'
 
@@ -32,7 +32,7 @@
   }
 
   $: if (text_color_threshold != null && node) {
-    text_color = get_text_color(node, bg_color, text_color_threshold)
+    text_color = choose_bw_for_contrast(node, bg_color, text_color_threshold)
   }
 </script>
 

diff --git a/src/lib/labels.ts b/src/lib/labels.ts
@@ -104,19 +104,20 @@ export function get_bg_color(
   if (bg_color) return bg_color
   // recurse up the DOM tree to find the first non-transparent background color
   const transparent = `rgba(0, 0, 0, 0)`
-  if (!elem) return `rgba(0, 0, 0, 0)`
+  if (!elem) return transparent // if no DOM node, return transparent
 
-  const bg = getComputedStyle(elem).backgroundColor
-  if (bg !== transparent) return bg
-  return get_bg_color(elem.parentElement)
+  const bg = getComputedStyle(elem).backgroundColor // get node background color
+  if (bg !== transparent) return bg // if not transparent, return it
+  return get_bg_color(elem.parentElement) // otherwise recurse up the DOM tree
 }
 
-export function get_text_color(
+export function choose_bw_for_contrast(
   node: HTMLElement | null,
   // you can explicitly pass bg_color to avoid DOM recursion and in case get_bg_color() fails
   bg_color: string | null = null,
   text_color_threshold: number = 0.7,
 ) {
-  const dark_bg = luminance(get_bg_color(node, bg_color)) < text_color_threshold
-  return dark_bg ? `white` : `black`
+  const light_bg =
+    luminance(get_bg_color(node, bg_color)) > text_color_threshold
+  return light_bg ? `black` : `white` // white text for dark backgrounds, black for light
 }
diff --git a/src/lib/periodic-table/ColorCustomizer.svelte b/src/lib/periodic-table/ColorCustomizer.svelte
@@ -62,16 +62,16 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
     place-content: center;
-    gap: 7pt;
-    max-width: 70em;
+    gap: var(--grid-gap, 7pt);
+    max-width: var(--grid-max-width, 70em);
     margin: 2em auto;
     justify-self: center;
   }
   div.grid > label {
-    padding: 1pt 6pt;
+    padding: var(--label-padding, 1pt 6pt);
     display: flex;
     align-items: center;
-    gap: 4pt;
+    gap: var(--label-gap, 4pt);
     border-radius: 3pt;
     text-transform: capitalize;
     font-weight: lighter;
@@ -81,8 +81,10 @@
     background-color: rgba(255, 255, 255, 0.1);
   }
   div.grid > label > input {
-    height: 3em;
-    width: 3em;
+    height: var(--input-color-height, 3em);
+    width: var(--input-color-width, 3em);
+    min-height: var(--input-color-min-height, var(--input-color-height, 3em));
+    min-width: var(--input-color-min-width, var(--input-color-width, 3em));
     border: none;
     background-color: transparent;
     cursor: pointer;

diff --git a/src/lib/structure/StructureLegend.svelte b/src/lib/structure/StructureLegend.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Composition } from '$lib'
-  import { element_data, get_text_color } from '$lib'
+  import { choose_bw_for_contrast, element_data } from '$lib'
   import { default_element_colors } from '$lib/colors'
   import { element_colors } from '$lib/stores'
   import { Tooltip } from 'svelte-zoo'
@@ -26,7 +26,7 @@
         on:dblclick|preventDefault={() => {
           $element_colors[elem] = default_element_colors[elem]
         }}
-        style:color={get_text_color(labels[idx])}
+        style:color={choose_bw_for_contrast(labels[idx])}
       >
         {elem}{amt}
         <input

diff --git a/src/routes/(demos)/structure/+page.md b/src/routes/(demos)/structure/+page.md
@@ -73,7 +73,9 @@
 
 <FileDetails {files} />
 
-## Multiple Structures in a grid
+## Structures in a grid
+
+Just to show off you can load several without the page getting too slow.
 
 ```svelte example stackblitz
 <script>
@@ -82,7 +84,7 @@
 </script>
 
 <ul>
-  {#each structures as structure}
+  {#each structures.filter(({sites}) => sites.length < 80) as structure}
     {@const { id } = structure}
     {@const href = `https://materialsproject.org/materials/${id}`}
     <li>
@@ -95,7 +97,7 @@
 <style>
   ul {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
     gap: 1em;
     list-style: none;
     padding: 0;

diff --git a/src/site/molecules/benzene.json b/src/site/molecules/benzene.json
@@ -1,80 +1 @@
-{
-  "@module": "pymatgen.core.structure",
-  "@class": "Molecule",
-  "charge": 0.0,
-  "spin_multiplicity": 1,
-  "sites": [
-    {
-      "name": "C",
-      "species": [{ "element": "C", "occu": 1 }],
-      "xyz": [0.0, 1.40272, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [0.0, 2.49029, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "C",
-      "species": [{ "element": "C", "occu": 1 }],
-      "xyz": [-1.21479, 0.70136, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [-2.15666, 1.24515, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "C",
-      "species": [{ "element": "C", "occu": 1 }],
-      "xyz": [-1.21479, -0.70136, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [-2.15666, -1.24515, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "C",
-      "species": [{ "element": "C", "occu": 1 }],
-      "xyz": [0.0, -1.40272, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [0.0, -2.49029, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "C",
-      "species": [{ "element": "C", "occu": 1 }],
-      "xyz": [1.21479, -0.70136, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [2.15666, -1.24515, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "C",
-      "species": [{ "element": "C", "occu": 1 }],
-      "xyz": [1.21479, 0.70136, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [2.15666, 1.24515, 0.0],
-      "properties": {}
-    }
-  ]
-}
+{"@module": "pymatgen.core.structure", "@class": "Molecule", "charge": 0.0, "spin_multiplicity": 1, "sites": [{"name": "C", "species": [{"element": "C", "occu": 1}], "xyz": [0.0, 1.40272, 0.0], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [0.0, 2.49029, 0.0], "properties": {}}, {"name": "C", "species": [{"element": "C", "occu": 1}], "xyz": [-1.21479, 0.70136, 0.0], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [-2.15666, 1.24515, 0.0], "properties": {}}, {"name": "C", "species": [{"element": "C", "occu": 1}], "xyz": [-1.21479, -0.70136, 0.0], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [-2.15666, -1.24515, 0.0], "properties": {}}, {"name": "C", "species": [{"element": "C", "occu": 1}], "xyz": [0.0, -1.40272, 0.0], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [0.0, -2.49029, 0.0], "properties": {}}, {"name": "C", "species": [{"element": "C", "occu": 1}], "xyz": [1.21479, -0.70136, 0.0], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [2.15666, -1.24515, 0.0], "properties": {}}, {"name": "C", "species": [{"element": "C", "occu": 1}], "xyz": [1.21479, 0.70136, 0.0], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [2.15666, 1.24515, 0.0], "properties": {}}]}
diff --git a/src/site/molecules/methane.json b/src/site/molecules/methane.json
@@ -1,38 +1 @@
-{
-  "@module": "pymatgen.core.structure",
-  "@class": "Molecule",
-  "charge": 0.0,
-  "spin_multiplicity": 1,
-  "sites": [
-    {
-      "name": "C",
-      "species": [{ "element": "C", "occu": 1 }],
-      "xyz": [0.0, 0.0, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [0.0, 0.0, 1.089],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [1.026719, 0.0, -0.363],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [-0.51336, -0.889165, -0.363],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [-0.51336, 0.889165, -0.363],
-      "properties": {}
-    }
-  ]
-}
+{ "@module": "pymatgen.core.structure", "@class": "Molecule", "charge": 0.0, "spin_multiplicity": 1, "sites": [{ "name": "C", "species": [{ "element": "C", "occu": 1}], "xyz": [0.0, 0.0, 0.0], "properties": {}}, { "name": "H", "species": [{ "element": "H", "occu": 1}], "xyz": [0.0, 0.0, 1.089], "properties": {}}, { "name": "H", "species": [{ "element": "H", "occu": 1}], "xyz": [1.026719, 0.0, -0.363], "properties": {}}, { "name": "H", "species": [{ "element": "H", "occu": 1}], "xyz": [-0.51336, -0.889165, -0.363], "properties": {}}, { "name": "H", "species": [{ "element": "H", "occu": 1}], "xyz": [-0.51336, 0.889165, -0.363], "properties": {}}]}
diff --git a/src/site/molecules/water.json b/src/site/molecules/water.json
@@ -1,26 +1 @@
-{
-  "@module": "pymatgen.core.structure",
-  "@class": "Molecule",
-  "charge": 0.0,
-  "spin_multiplicity": 1,
-  "sites": [
-    {
-      "name": "O",
-      "species": [{ "element": "O", "occu": 1 }],
-      "xyz": [0.0, 0.0, 0.0],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [0.0, 0.757, 0.586],
-      "properties": {}
-    },
-    {
-      "name": "H",
-      "species": [{ "element": "H", "occu": 1 }],
-      "xyz": [0.0, -0.757, 0.586],
-      "properties": {}
-    }
-  ]
-}
+{"@module": "pymatgen.core.structure", "@class": "Molecule", "charge": 0.0, "spin_multiplicity": 1, "sites": [{"name": "O", "species": [{"element": "O", "occu": 1}], "xyz": [0.0, 0.0, 0.0], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [0.0, 0.757, 0.586], "properties": {}}, {"name": "H", "species": [{"element": "H", "occu": 1}], "xyz": [0.0, -0.757, 0.586], "properties": {}}]}