update

ts_web/elements/internal/uplinternal-miniheading.ts

@@ -1,26 +1,33 @@
-import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/dees-element';
-
+import { customElement, DeesElement, html, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { fonts, colors, spacing } from '../../styles/shared.styles.js';
 
 @customElement('uplinternal-miniheading')
 export class UplinternalMiniheading extends DeesElement {
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        display: block;
+        font-family: ${unsafeCSS(fonts.base)};
+      }
+
+      h5 {
+        display: block;
+        max-width: 1200px;
+        margin: 0px auto;
+        padding: 0px 0px ${unsafeCSS(spacing.md)} 0px;
+        color: ${colors.text.secondary};
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 0.025em;
+        text-transform: uppercase;
+      }
+    `
+  ];
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        :host {
-          display: block;
-          font-family: Inter;
-        }
-
-        h5 {
-          display: block;
-          max-width: 900px;
-          margin: 0px auto;
-          padding: 0px 0px 10px 0px;
-          color: #707070;
-        }
-      </style>
       <h5>${this.textContent}</h5>
     `;
   }