lucos_search_component 3.0.1 → 3.0.2

package/.github/dependabot.yml

@@ -3,7 +3,7 @@ updates:
   - package-ecosystem: npm
     directory: /
     schedule:
-      interval: daily
+      interval: weekly
       time: '06:00'
     open-pull-requests-limit: 10
     allow:

package/dist/index.js

@@ -5655,6 +5655,8 @@ TomSelect.define('virtual_scroll', plugin);
 
 var tomSelectStylesheet = "/**\n * tom-select.css (v2.6.0)\n * Copyright (c) contributors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not use this\n * file except in compliance with the License. You may obtain a copy of the License at:\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF\n * ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n *\n */\n.ts-control {\n  border: 1px solid #d0d0d0;\n  padding: 8px 8px;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding: calc(8px - 2px - 1px) 8px calc(8px - 2px - 3px - 1px);\n}\n.full .ts-control {\n  background-color: #fff;\n}\n.disabled .ts-control, .disabled .ts-control * {\n  cursor: default !important;\n}\n.focus .ts-control {\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n.ts-control > * {\n  vertical-align: baseline;\n  display: inline-block;\n}\n.ts-wrapper.multi .ts-control > div {\n  cursor: pointer;\n  margin: 0 3px 3px 0;\n  padding: 2px 6px;\n  background: #1da7ee;\n  color: #fff;\n  border: 1px solid #0073bb;\n  overflow: auto;\n}\n.ts-wrapper.multi .ts-control > div.active {\n  background: #92c836;\n  color: #fff;\n  border: 1px solid #00578d;\n}\n.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {\n  color: white;\n  background: #d2d2d2;\n  border: 1px solid #aaaaaa;\n}\n.ts-control > input {\n  flex: 1 1 auto;\n  min-width: 7rem;\n  display: inline-block !important;\n  padding: 0 !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  max-width: 100% !important;\n  margin: 0 !important;\n  text-indent: 0 !important;\n  border: 0 none !important;\n  background: none !important;\n  line-height: inherit !important;\n  -webkit-user-select: auto !important;\n     -moz-user-select: auto !important;\n      -ms-user-select: auto !important;\n          user-select: auto !important;\n  box-shadow: none !important;\n}\n.ts-control > input::-ms-clear {\n  display: none;\n}\n.ts-control > input:focus {\n  outline: none !important;\n}\n.has-items .ts-control > input {\n  margin: 0px 4px !important;\n}\n.ts-control.rtl {\n  text-align: right;\n}\n.ts-control.rtl.single .ts-control:after {\n  left: 15px;\n  right: auto;\n}\n.ts-control.rtl .ts-control > input {\n  margin: 0px 4px 0px -2px !important;\n}\n.disabled .ts-control {\n  opacity: 0.5;\n  background-color: #fafafa;\n}\n.input-hidden .ts-control > input {\n  opacity: 0;\n  position: absolute;\n  left: -10000px;\n}\n\n.ts-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n  border: 1px solid #d0d0d0;\n  background: #fff;\n  margin: 0.25rem 0 0;\n  border-top: 0 none;\n  box-sizing: border-box;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  border-radius: 0 0 3px 3px;\n}\n.ts-dropdown [data-selectable] {\n  cursor: pointer;\n  overflow: hidden;\n}\n.ts-dropdown [data-selectable] .highlight {\n  background: rgba(125, 168, 208, 0.2);\n  border-radius: 1px;\n}\n.ts-dropdown .option,\n.ts-dropdown .optgroup-header,\n.ts-dropdown .no-results,\n.ts-dropdown .create {\n  padding: 5px 8px;\n}\n.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {\n  cursor: inherit;\n  opacity: 0.5;\n}\n.ts-dropdown [data-selectable].option {\n  opacity: 1;\n  cursor: pointer;\n}\n.ts-dropdown .optgroup:first-child .optgroup-header {\n  border-top: 0 none;\n}\n.ts-dropdown .optgroup-header {\n  color: #303030;\n  background: #fff;\n  cursor: default;\n}\n.ts-dropdown .active {\n  background-color: #f5fafd;\n  color: #495c68;\n}\n.ts-dropdown .active.create {\n  color: #495c68;\n}\n.ts-dropdown .create {\n  color: rgba(48, 48, 48, 0.5);\n}\n.ts-dropdown .spinner {\n  display: inline-block;\n  width: 30px;\n  height: 30px;\n  margin: 5px 8px;\n}\n.ts-dropdown .spinner::after {\n  content: \" \";\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 5px solid #d0d0d0;\n  border-color: #d0d0d0 transparent #d0d0d0 transparent;\n  animation: lds-dual-ring 1.2s linear infinite;\n}\n@keyframes lds-dual-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ts-dropdown-content {\n  overflow: hidden auto;\n  max-height: 200px;\n  scroll-behavior: smooth;\n}\n\n.ts-wrapper.plugin-drag_drop .ts-dragging {\n  color: transparent !important;\n}\n.ts-wrapper.plugin-drag_drop .ts-dragging > * {\n  visibility: hidden !important;\n}\n\n.plugin-checkbox_options:not(.rtl) .option input {\n  margin-right: 0.5rem;\n}\n\n.plugin-checkbox_options.rtl .option input {\n  margin-left: 0.5rem;\n}\n\n/* stylelint-disable function-name-case */\n.plugin-clear_button {\n  --ts-pr-clear-button: 1em;\n}\n.plugin-clear_button .clear-button {\n  opacity: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: calc(8px - 6px);\n  margin-right: 0 !important;\n  background: transparent !important;\n  transition: opacity 0.5s;\n  cursor: pointer;\n}\n.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {\n  right: max(var(--ts-pr-caret), 8px);\n}\n.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {\n  opacity: 1;\n}\n\n.ts-wrapper .dropdown-header {\n  position: relative;\n  padding: 10px 8px;\n  border-bottom: 1px solid #d0d0d0;\n  background: color-mix(#fff, #d0d0d0, 85%);\n  border-radius: 3px 3px 0 0;\n}\n.ts-wrapper .dropdown-header-close {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  color: #303030;\n  opacity: 0.4;\n  margin-top: -12px;\n  line-height: 20px;\n  font-size: 20px !important;\n}\n.ts-wrapper .dropdown-header-close:hover {\n  color: black;\n}\n\n.plugin-dropdown_input.focus.dropdown-active .ts-control {\n  box-shadow: none;\n  border: 1px solid #d0d0d0;\n}\n.plugin-dropdown_input .dropdown-input {\n  border: 1px solid #d0d0d0;\n  border-width: 0 0 1px;\n  display: block;\n  padding: 8px 8px;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  width: 100%;\n  background: transparent;\n}\n.plugin-dropdown_input .items-placeholder {\n  border: 0 none !important;\n  box-shadow: none !important;\n  width: 100%;\n}\n.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {\n  display: none !important;\n}\n\n.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {\n  min-width: 0;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {\n  flex: none;\n  min-width: 4px;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {\n  color: transparent;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {\n  color: transparent;\n}\n\n.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {\n  display: flex;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup {\n  border-right: 1px solid #f2f2f2;\n  border-top: 0 none;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-width: 0;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {\n  border-right: 0 none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup::before {\n  display: none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup-header {\n  border-top: 0 none;\n}\n\n.ts-wrapper.plugin-remove_button .item {\n  display: inline-flex;\n  align-items: center;\n}\n.ts-wrapper.plugin-remove_button .item .remove {\n  color: inherit;\n  text-decoration: none;\n  vertical-align: middle;\n  display: inline-block;\n  padding: 0 6px;\n  border-radius: 0 2px 2px 0;\n  box-sizing: border-box;\n}\n.ts-wrapper.plugin-remove_button .item .remove:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {\n  background: none;\n}\n.ts-wrapper.plugin-remove_button .remove-single {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 23px;\n}\n\n.ts-wrapper.plugin-remove_button:not(.rtl) .item {\n  padding-right: 0 !important;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {\n  border-left: 1px solid #0073bb;\n  margin-left: 6px;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {\n  border-left-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {\n  border-left-color: #aaaaaa;\n}\n\n.ts-wrapper.plugin-remove_button.rtl .item {\n  padding-left: 0 !important;\n}\n.ts-wrapper.plugin-remove_button.rtl .item .remove {\n  border-right: 1px solid #0073bb;\n  margin-right: 6px;\n}\n.ts-wrapper.plugin-remove_button.rtl .item.active .remove {\n  border-right-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {\n  border-right-color: #aaaaaa;\n}\n\n:root {\n  --ts-pr-clear-button: 0px;\n  --ts-pr-caret: 0px;\n  --ts-pr-min: .75rem;\n}\n\n.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {\n  cursor: pointer;\n}\n\n.ts-control:not(.rtl) {\n  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-control.rtl {\n  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-wrapper {\n  position: relative;\n}\n\n.ts-dropdown,\n.ts-control,\n.ts-control input {\n  color: #303030;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 18px;\n}\n\n.ts-control,\n.ts-wrapper.single.input-active .ts-control {\n  background: #fff;\n  cursor: text;\n}\n\n.ts-hidden-accessible {\n  border: 0 !important;\n  clip: rect(0 0 0 0) !important;\n  -webkit-clip-path: inset(50%) !important;\n          clip-path: inset(50%) !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n}\n\n.ts-wrapper.single .ts-control {\n  --ts-pr-caret: 2rem;\n}\n.ts-wrapper.single .ts-control::after {\n  content: \" \";\n  display: block;\n  position: absolute;\n  top: 50%;\n  margin-top: -3px;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 5px 5px 0 5px;\n  border-color: #808080 transparent transparent transparent;\n}\n.ts-wrapper.single .ts-control:not(.rtl)::after {\n  right: 15px;\n}\n.ts-wrapper.single .ts-control.rtl::after {\n  left: 15px;\n}\n.ts-wrapper.single.dropdown-active .ts-control::after {\n  margin-top: -4px;\n  border-width: 0 5px 5px 5px;\n  border-color: transparent transparent #808080 transparent;\n}\n.ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.input-active .ts-control input {\n  cursor: text;\n}\n\n.ts-wrapper {\n  display: flex;\n  min-height: 36px;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding-left: 5px;\n  --ts-pr-min: 5px;\n}\n.ts-wrapper.multi .ts-control [data-value] {\n  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);\n  border-radius: 3px;\n  background-color: color-mix(#1da7ee, #178ee9, 60%);\n  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);\n  background-repeat: repeat-x;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);\n}\n.ts-wrapper.multi .ts-control [data-value].active {\n  background-color: color-mix(#008fd8, #0075cf, 60%);\n  background-image: linear-gradient(to bottom, #008fd8, #0075cf);\n  background-repeat: repeat-x;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] {\n  color: #999;\n  text-shadow: none;\n  background: none;\n  box-shadow: none;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value], .ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  border-color: #e6e6e6;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  background: none;\n}\n.ts-wrapper.single .ts-control {\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);\n  background-color: color-mix(#fefefe, #f2f2f2, 60%);\n  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);\n  background-repeat: repeat-x;\n}\n\n.ts-wrapper.single .ts-control, .ts-dropdown.single {\n  border-color: #b8b8b8;\n}\n\n.dropdown-active .ts-control {\n  border-radius: 3px 3px 0 0;\n}\n\n.ts-dropdown .optgroup-header {\n  padding-top: 7px;\n  font-weight: bold;\n  font-size: 0.85em;\n}\n.ts-dropdown .optgroup {\n  border-top: 1px solid #f0f0f0;\n}\n.ts-dropdown .optgroup:first-child {\n  border-top: 0 none;\n}\n/*# sourceMappingURL=tom-select.default.css.map */";
 
+var categoryColoursCSS = "/* Generated by scripts/generate-colours.js — do not edit by hand */\n/* Run `npm run build` to regenerate from the eolas categories endpoint */\n\n.lozenge[data-category=\"People\"] {\n\t--lozenge-background: #044E00;\n\t--lozenge-border: #033100;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Anthropological\"] {\n\t--lozenge-background: #8affe7;\n\t--lozenge-border: #068900;\n\t--lozenge-text: #000000;\n}\n\n.lozenge[data-category=\"Anthropogeographical\"] {\n\t--lozenge-background: #aed0db;\n\t--lozenge-border: #3f6674;\n\t--lozenge-text: #0c1a1b;\n}\n\n.lozenge[data-category=\"Musical\"] {\n\t--lozenge-background: #000060;\n\t--lozenge-border: #000020;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Aquatic\"] {\n\t--lozenge-background: #0085fe;\n\t--lozenge-border: #0036b1;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Terrestrial\"] {\n\t--lozenge-background: #652c17;\n\t--lozenge-border: #321200;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Cosmic\"] {\n\t--lozenge-background: #15163a;\n\t--lozenge-border: #000000;\n\t--lozenge-text: #feffe8;\n}\n\n.lozenge[data-category=\"Supernatural\"] {\n\t--lozenge-background: #f1ff5f;\n\t--lozenge-border: #674800;\n\t--lozenge-text: #352005;\n}\n\n.lozenge[data-category=\"Historical\"] {\n\t--lozenge-background: #740909;\n\t--lozenge-border: #470202;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Temporal\"] {\n\t--lozenge-background: #fffc33;\n\t--lozenge-border: #7f7e00;\n\t--lozenge-text: #0f0f00;\n}\n\n.lozenge[data-category=\"Mathematical\"] {\n\t--lozenge-background: #f53b0e;\n\t--lozenge-border: #7e3d2e;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Technological\"] {\n\t--lozenge-background: #c70f7a;\n\t--lozenge-border: #8f125b;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Meteorological\"] {\n\t--lozenge-background: #ffffff;\n\t--lozenge-border: #333333;\n\t--lozenge-text: #000000;\n}\n\n.lozenge[data-category=\"Meta\"] {\n\t--lozenge-background: #4a5568;\n\t--lozenge-border: #2d3748;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Dramaturgical\"] {\n\t--lozenge-background: #5f0086;\n\t--lozenge-border: #59007d;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Literary\"] {\n\t--lozenge-background: #a22400;\n\t--lozenge-border: #5e1500;\n\t--lozenge-text: #ffffff;\n}\n";
+
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
 		return ['data-api-key','data-types','data-exclude-types','data-label-override-zxx','data-common','data-preload'];
@@ -5706,82 +5708,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				border-left-color: var(--lozenge-border) !important;
 			}
 
-			/* Default colour to greys, but override based on category */
+			/* Default colour to greys for unknown categories */
 			.lozenge {
 				--lozenge-background: #555;
 				--lozenge-border: #6d6d6d;
 				--lozenge-text: #fff;
 			}
-			.lozenge[data-category="Musical"] {
-				--lozenge-background: #000060;
-				--lozenge-border: #000020;
-			}
-			.lozenge[data-category="People"] {
-				--lozenge-background: #044E00;
-				--lozenge-border: #033100;
-			}
-			.lozenge[data-category="Aquatic"] {
-				--lozenge-background: #0085fe;
-				--lozenge-border: #0036b1;
-			}
-			.lozenge[data-category="Terrestrial"] {
-				--lozenge-background: #652c17;
-				--lozenge-border: #321200;
-			}
-			.lozenge[data-category="Cosmic"] {
-				--lozenge-background: #15163a;
-				--lozenge-border: #000000;
-				--lozenge-text: #feffe8;
-			}
-			.lozenge[data-category="Anthropogeographical"] {
-				--lozenge-background: #aed0db;
-				--lozenge-border: #3f6674;
-				--lozenge-text: #0c1a1b;
-			}
-			.lozenge[data-category="Supernatural"] {
-				--lozenge-background: #f1ff5f;
-				--lozenge-border: #674800;
-				--lozenge-text: #352005;
-			}
-			.lozenge[data-category="Historical"] {
-				--lozenge-background: #740909;
-				--lozenge-border: #470202;
-			}
-			.lozenge[data-category="Mathematical"] {
-				--lozenge-background: #f53b0e;
-				--lozenge-border: #7e3d2e;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Temporal"] {
-				--lozenge-background: #fffc33;
-				--lozenge-border: #7f7e00;
-				--lozenge-text: #0f0f00;
-			}
-			.lozenge[data-category="Anthropological"] {
-				--lozenge-background: #8affe7;
-				--lozenge-border: #068900;
-				--lozenge-text: #000000;
-			}
-			.lozenge[data-category="Technological"] {
-				--lozenge-background: #c70f7a;
-				--lozenge-border: #8f125b;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Meteorological"] {
-				--lozenge-background: #fff;
-				--lozenge-border: #333;
-				--lozenge-text: #000;
-			}
-			.lozenge[data-category="Literary"] {
-				--lozenge-background: #a22400;
-				--lozenge-border: #5e1500;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Dramaturgical"] {
-				--lozenge-background: #5f0086;
-				--lozenge-border: #59007d;
-				--lozenge-text: #fff;
-			}
 
 			.lozenge.active {
 				--lozenge-border: #b00;
@@ -5800,6 +5732,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 		`;
 		shadow.appendChild(mainStyle);
 
+		const categoryColourStyle = document.createElement('style');
+		categoryColourStyle.textContent = categoryColoursCSS;
+		shadow.appendChild(categoryColourStyle);
 
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "lucos_search_component",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "example": "source .env && KEY_LUCOS_ARACHNE=$KEY_LUCOS_ARACHNE envsubst < example/index.html > example/built.html && npm run build && webpack -c example/webpack.config.js && open example/built.html",
-    "build": "rollup -c"
+    "build": "node scripts/generate-colours.js && rollup -c"
   },
   "repository": {
     "type": "git",

package/scripts/generate-colours.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/**
+ * Fetches category colour data from eolas and writes the generated CSS file
+ * used by lucos-search.js.  Run automatically as the first step of `npm run build`.
+ */
+
+import { writeFileSync, mkdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const OUTPUT_FILE = join(__dirname, '..', 'web-components', 'generated', 'category-colours.css');
+const EOLAS_URL = 'https://eolas.l42.eu/metadata/categories.json';
+
+async function main() {
+	console.log(`Fetching category colours from ${EOLAS_URL} ...`);
+	const response = await fetch(EOLAS_URL);
+	if (!response.ok) {
+		throw new Error(`Failed to fetch category colours: HTTP ${response.status}`);
+	}
+	const categories = await response.json();
+
+	const cssLines = [
+		'/* Generated by scripts/generate-colours.js — do not edit by hand */',
+		'/* Run `npm run build` to regenerate from the eolas categories endpoint */',
+		'',
+	];
+
+	for (const { name, background, border, text } of categories) {
+		cssLines.push(`.lozenge[data-category="${name}"] {`);
+		cssLines.push(`\t--lozenge-background: ${background};`);
+		cssLines.push(`\t--lozenge-border: ${border};`);
+		cssLines.push(`\t--lozenge-text: ${text};`);
+		cssLines.push('}');
+		cssLines.push('');
+	}
+
+	mkdirSync(dirname(OUTPUT_FILE), { recursive: true });
+	writeFileSync(OUTPUT_FILE, cssLines.join('\n'));
+	console.log(`Written ${OUTPUT_FILE} (${categories.length} categories)`);
+}
+
+main().catch(err => {
+	console.error(`Error generating category colours: ${err.message}`);
+	process.exit(1);
+});

package/web-components/lucos-search.js

@@ -1,5 +1,6 @@
 import TomSelect from 'tom-select';
 import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
+import categoryColoursCSS from './generated/category-colours.css';
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
@@ -52,82 +53,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				border-left-color: var(--lozenge-border) !important;
 			}
 
-			/* Default colour to greys, but override based on category */
+			/* Default colour to greys for unknown categories */
 			.lozenge {
 				--lozenge-background: #555;
 				--lozenge-border: #6d6d6d;
 				--lozenge-text: #fff;
 			}
-			.lozenge[data-category="Musical"] {
-				--lozenge-background: #000060;
-				--lozenge-border: #000020;
-			}
-			.lozenge[data-category="People"] {
-				--lozenge-background: #044E00;
-				--lozenge-border: #033100;
-			}
-			.lozenge[data-category="Aquatic"] {
-				--lozenge-background: #0085fe;
-				--lozenge-border: #0036b1;
-			}
-			.lozenge[data-category="Terrestrial"] {
-				--lozenge-background: #652c17;
-				--lozenge-border: #321200;
-			}
-			.lozenge[data-category="Cosmic"] {
-				--lozenge-background: #15163a;
-				--lozenge-border: #000000;
-				--lozenge-text: #feffe8;
-			}
-			.lozenge[data-category="Anthropogeographical"] {
-				--lozenge-background: #aed0db;
-				--lozenge-border: #3f6674;
-				--lozenge-text: #0c1a1b;
-			}
-			.lozenge[data-category="Supernatural"] {
-				--lozenge-background: #f1ff5f;
-				--lozenge-border: #674800;
-				--lozenge-text: #352005;
-			}
-			.lozenge[data-category="Historical"] {
-				--lozenge-background: #740909;
-				--lozenge-border: #470202;
-			}
-			.lozenge[data-category="Mathematical"] {
-				--lozenge-background: #f53b0e;
-				--lozenge-border: #7e3d2e;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Temporal"] {
-				--lozenge-background: #fffc33;
-				--lozenge-border: #7f7e00;
-				--lozenge-text: #0f0f00;
-			}
-			.lozenge[data-category="Anthropological"] {
-				--lozenge-background: #8affe7;
-				--lozenge-border: #068900;
-				--lozenge-text: #000000;
-			}
-			.lozenge[data-category="Technological"] {
-				--lozenge-background: #c70f7a;
-				--lozenge-border: #8f125b;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Meteorological"] {
-				--lozenge-background: #fff;
-				--lozenge-border: #333;
-				--lozenge-text: #000;
-			}
-			.lozenge[data-category="Literary"] {
-				--lozenge-background: #a22400;
-				--lozenge-border: #5e1500;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Dramaturgical"] {
-				--lozenge-background: #5f0086;
-				--lozenge-border: #59007d;
-				--lozenge-text: #fff;
-			}
 
 			.lozenge.active {
 				--lozenge-border: #b00;
@@ -146,6 +77,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 		`;
 		shadow.appendChild(mainStyle);
 
+		const categoryColourStyle = document.createElement('style');
+		categoryColourStyle.textContent = categoryColoursCSS;
+		shadow.appendChild(categoryColourStyle);
 
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");