Add bundled fonts, token CSS, and local font-face loading

Add bundled fonts, token CSS, and local font-face loading

Co-authored-by: grok <24+grok@code.cubecraftcreations.com>
Co-committed-by: grok <24+grok@code.cubecraftcreations.com>

frontend/src/cards/admin.ts

@@ -1,4 +1,5 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import adminTokens from "../../../custom_components/nestquest/www/nestquest-admin-tokens.css?inline";
 
 import { registerCustomCard, type CardConfig, type HassLike } from "../types";
 
@@ -8,6 +9,8 @@ export class NestQuestAdminCard extends LitElement {
     _config: { state: true },
   };
 
+  static styles = [unsafeCSS(adminTokens)];
+
   hass?: HassLike;
   _config?: CardConfig;
 

frontend/src/cards/party-board.ts

@@ -1,4 +1,5 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import panelTokens from "../../../custom_components/nestquest/www/nestquest-panel-tokens.css?inline";
 
 import { registerCustomCard, type CardConfig, type HassLike } from "../types";
 
@@ -8,6 +9,8 @@ export class NestQuestPartyBoardCard extends LitElement {
     _config: { state: true },
   };
 
+  static styles = [unsafeCSS(panelTokens)];
+
   hass?: HassLike;
   _config?: CardConfig;
 

frontend/src/cards/quest-log.ts

@@ -1,4 +1,5 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import panelTokens from "../../../custom_components/nestquest/www/nestquest-panel-tokens.css?inline";
 
 import { registerCustomCard, type CardConfig, type HassLike } from "../types";
 
@@ -8,6 +9,8 @@ export class NestQuestQuestLogCard extends LitElement {
     _config: { state: true },
   };
 
+  static styles = [unsafeCSS(panelTokens)];
+
   hass?: HassLike;
   _config?: CardConfig;
 

frontend/src/nestquest-cards.ts

@@ -1,3 +1,12 @@
 import "./cards/party-board";
 import "./cards/quest-log";
 import "./cards/admin";
+
+const FONTS_HREF = "/nestquest-static/nestquest-fonts.css";
+if (!document.querySelector('link[data-nq-fonts=""]')) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = FONTS_HREF;
+  link.dataset.nqFonts = "";
+  document.head.appendChild(link);
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />