Remove hardcoded Google font links, add CSS variables to overwrite fo…

…nt family.
ember-nexus · Aug 1, 2024 · 975fb2b · 975fb2b
1 parent 99cfd7f
commit 975fb2b
Show file tree

Hide file tree

Showing 13 changed files with 37 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Changed
+- Remove hardcoded Google font links, add CSS variables to overwrite font family.
 
 ## 0.0.10 - 2024-07-23
 ### Changed

diff --git a/src/Component/Default/EmberNexusDefaultCard.ts b/src/Component/Default/EmberNexusDefaultCard.ts
@@ -8,13 +8,12 @@ import { findBestFontWeightColor, getNameFromElementOrId, getTitleFromElementOrI
 import { getColorFromElementOrId } from '../../Helper/ColorHelper';
 import { getIconForElement } from '../../Helper/IconHelper';
 import { singleElementMachine } from '../../Machine';
-import { shadowStyle } from '../../Style';
-import { cardComponentStyle } from '../../Style';
+import { cardComponentStyle, fontStyle, shadowStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-card')
 class EmberNexusDefaultCard extends LitElement {
-  static styles = [cardComponentStyle, shadowStyle];
+  static styles = [cardComponentStyle, shadowStyle, fontStyle];
 
   @property({ type: String, attribute: 'element-id' })
   elementId: string;
@@ -110,8 +109,8 @@ class EmberNexusDefaultCard extends LitElement {
       style="${styleMap({ ...backgroundStyle, ...textStyles })}"
       title="${title}"
     >
-      <p class="name">${icon} ${getNameFromElementOrId(this.elementId, this._element)}</p>
-      <div class="info">${this._element?.type} ${this.elementId}</div>
+      <p class="name font-sans">${icon} ${getNameFromElementOrId(this.elementId, this._element)}</p>
+      <div class="info font-sans">${this._element?.type} ${this.elementId}</div>
     </div>`;
   }
 }

diff --git a/src/Component/Default/EmberNexusDefaultFrameless.ts b/src/Component/Default/EmberNexusDefaultFrameless.ts
@@ -7,12 +7,12 @@ import { Actor, createActor } from 'xstate';
 import { findBestFontWeightColor, getInitialsFromElementOrId, getTitleFromElementOrId } from '../../Helper';
 import { getColorFromElementOrId } from '../../Helper/ColorHelper';
 import { singleElementMachine } from '../../Machine';
-import { framelessComponentStyle } from '../../Style';
+import { fontStyle, framelessComponentStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-frameless')
 class EmberNexusDefaultFrameless extends LitElement {
-  static styles = [framelessComponentStyle];
+  static styles = [framelessComponentStyle, fontStyle];
 
   @property({ type: String, attribute: 'element-id' })
   elementId: string;
@@ -97,7 +97,7 @@ class EmberNexusDefaultFrameless extends LitElement {
       </div>`;
       title = this._error;
     }
-    return html`<div class="frameless-component" style="${styleMap(backgroundStyle)}" title="${title}">
+    return html`<div class="frameless-component font-sans" style="${styleMap(backgroundStyle)}" title="${title}">
       ${content}
     </div>`;
   }

diff --git a/src/Component/Default/EmberNexusDefaultIcon.ts b/src/Component/Default/EmberNexusDefaultIcon.ts
@@ -7,13 +7,13 @@ import { Actor, createActor } from 'xstate';
 import { findBestFontWeightColor, getInitialsFromElementOrId, getTitleFromElementOrId } from '../../Helper';
 import { getColorFromElementOrId } from '../../Helper/ColorHelper';
 import { singleElementMachine } from '../../Machine';
-import { shadowStyle } from '../../Style';
+import { fontStyle, shadowStyle } from '../../Style';
 import { iconComponentStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-icon')
 class EmberNexusDefaultIcon extends LitElement {
-  static styles = [iconComponentStyle, shadowStyle];
+  static styles = [iconComponentStyle, shadowStyle, fontStyle];
 
   @property({ type: String, attribute: 'element-id' })
   elementId: string;
@@ -86,7 +86,7 @@ class EmberNexusDefaultIcon extends LitElement {
     let content: TemplateResult;
     let title: string;
     if (this._error == null) {
-      content = html`<span class="text-icon" style="${styleMap(textStyles)}">
+      content = html`<span class="text-icon font-sans" style="${styleMap(textStyles)}">
         ${getInitialsFromElementOrId(this.elementId, this._element)}
       </span>`;
       title = getTitleFromElementOrId(this.elementId, this._element);

diff --git a/src/Component/Default/EmberNexusDefaultPill.ts b/src/Component/Default/EmberNexusDefaultPill.ts
@@ -11,13 +11,13 @@ import {
 } from '../../Helper';
 import { getColorFromElement, getColorFromElementOrId } from '../../Helper/ColorHelper';
 import { singleElementMachine } from '../../Machine';
-import { shadowStyle } from '../../Style';
+import { fontStyle, shadowStyle } from '../../Style';
 import { pillComponentStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-pill')
 class EmberNexusDefaultPill extends LitElement {
-  static styles = [pillComponentStyle, shadowStyle];
+  static styles = [pillComponentStyle, shadowStyle, fontStyle];
 
   @property({ type: String, attribute: 'element-id' })
   elementId: string;
@@ -112,7 +112,7 @@ class EmberNexusDefaultPill extends LitElement {
 
     return html`<div class="pill-component shadow ${icon ? 'has-icon' : ''}" style="${styleMap(colorStyle)}">
       ${icon}
-      <span class="content" style="${styleMap(textStyles)}">${content}</span>
+      <span class="content font-sans" style="${styleMap(textStyles)}">${content}</span>
     </div>`;
   }
 }

diff --git a/src/Component/Default/EmberNexusDefaultThumbnail.ts b/src/Component/Default/EmberNexusDefaultThumbnail.ts
@@ -11,13 +11,13 @@ import {
 } from '../../Helper';
 import { getColorFromElementOrId } from '../../Helper/ColorHelper';
 import { singleElementMachine } from '../../Machine';
-import { shadowStyle } from '../../Style';
+import { fontStyle, shadowStyle } from '../../Style';
 import { thumbnailComponentStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-thumbnail')
 class EmberNexusDefaultThumbnail extends LitElement {
-  static styles = [thumbnailComponentStyle, shadowStyle];
+  static styles = [thumbnailComponentStyle, shadowStyle, fontStyle];
 
   @property({ type: String, attribute: 'element-id' })
   elementId: string;
@@ -104,8 +104,10 @@ class EmberNexusDefaultThumbnail extends LitElement {
     }
 
     return html`<div class="thumbnail-component shadow" style="${styleMap(backgroundStyle)}">
-      <span class="name" style="${styleMap(textStyles)}" title="${primaryTextTitle}"> ${primaryText} </span>
-      <span class="type" style="${styleMap(textStyles)}" title="${secondaryTextTitle}"> ${secondaryText} </span>
+      <span class="name font-sans" style="${styleMap(textStyles)}" title="${primaryTextTitle}"> ${primaryText} </span>
+      <span class="type font-sans" style="${styleMap(textStyles)}" title="${secondaryTextTitle}">
+        ${secondaryText}
+      </span>
     </div>`;
   }
 }

diff --git a/src/Style/CardComponentStyle.ts b/src/Style/CardComponentStyle.ts
@@ -1,8 +1,6 @@
 import { css } from 'lit';
 
 const cardComponentStyle = css`
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400:500:600:700&display=swap');
-
   * {
     box-sizing: border-box;
   }
@@ -17,7 +15,6 @@ const cardComponentStyle = css`
     align-items: stretch;
     width: 100%;
 
-    font-family: 'Roboto', sans-serif;
     font-weight: 400;
     font-size: 1rem;
 

diff --git a/src/Style/FontStyle.ts b/src/Style/FontStyle.ts
@@ -0,0 +1,15 @@
+import { css } from 'lit';
+
+const fontStyle = css`
+  .font-sans {
+    font-family: var(--font-sans, 'Roboto'), sans-serif;
+  }
+  .font-serif {
+    font-family: var(--font-serif, 'Roboto'), serif;
+  }
+  .font-mono {
+    font-family: var(--font-mono, 'Roboto Mono'), monospace;
+  }
+`;
+
+export { fontStyle };
diff --git a/src/Style/FramelessComponentStyle.ts b/src/Style/FramelessComponentStyle.ts
@@ -1,8 +1,6 @@
 import { css } from 'lit';
 
 const framelessComponentStyle = css`
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400:500:600:700&display=swap');
-
   * {
     box-sizing: border-box;
   }
@@ -17,7 +15,6 @@ const framelessComponentStyle = css`
     width: 100%;
     height: 100%;
 
-    font-family: 'Roboto', sans-serif;
     font-weight: 400;
     font-size: 1rem;
 

diff --git a/src/Style/IconComponentStyle.ts b/src/Style/IconComponentStyle.ts
@@ -1,8 +1,6 @@
 import { css } from 'lit';
 
 const iconComponentStyle = css`
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400:500:600:700&display=swap');
-
   * {
     box-sizing: border-box;
   }
@@ -22,8 +20,6 @@ const iconComponentStyle = css`
     justify-content: center;
     align-items: center;
 
-    font-family: 'Roboto', sans-serif;
-
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;

diff --git a/src/Style/PillComponentStyle.ts b/src/Style/PillComponentStyle.ts
@@ -1,8 +1,6 @@
 import { css } from 'lit';
 
 const pillComponentStyle = css`
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400:500:600:700&display=swap');
-
   * {
     box-sizing: border-box;
   }
@@ -21,7 +19,6 @@ const pillComponentStyle = css`
     padding-right: 0.5em;
     padding-left: 0.5em;
 
-    font-family: 'Roboto', sans-serif;
     font-weight: 400;
 
     //border: 1px solid gray;

diff --git a/src/Style/ThumbnailComponentStyle.ts b/src/Style/ThumbnailComponentStyle.ts
@@ -1,8 +1,6 @@
 import { css } from 'lit';
 
 const thumbnailComponentStyle = css`
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400:500:600:700&display=swap');
-
   * {
     box-sizing: border-box;
   }
@@ -23,7 +21,6 @@ const thumbnailComponentStyle = css`
     aspect-ratio: 1;
     gap: 0.5rem;
 
-    font-family: 'Roboto', sans-serif;
     font-weight: 400;
     font-size: 1rem;
 

diff --git a/src/Style/index.ts b/src/Style/index.ts
@@ -4,4 +4,5 @@ export * from './ThumbnailComponentStyle';
 export * from './FramelessComponentStyle';
 export * from './PillComponentStyle';
 export * from './ShadowStyle';
+export * from './FontStyle';
 export * from './InlineTextComponentStyle';