BREAKING CHANGE(elements): Migrate web components to @design.estate/dees-element, introduce shared theme colors and cssManager, and update imports/usages across ts_web.

ts_web/elements/consentsoftware-header.ts

@@ -1,40 +1,42 @@
-import * as shared from './shared.js';
+import { cssManager, colors } from './shared.js';
 
-import { LitElement, html, css, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { property } from 'lit/decorators/property.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
 
 @customElement('consentsoftware-header')
-export class ConsentsoftwareHeader extends LitElement {
-  public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
+export class ConsentsoftwareHeader extends DeesElement {
+  public static demo = () => html`<consentsoftware-header></consentsoftware-header>`;
 
-  public static styles = css`
-    :host {
-      display: block;
-      padding: 14px 16px;
-      font-family: ${shared.fontStack};
-      border-bottom: 1px solid var(--border, hsl(0 0% 18%));
-    }
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 14px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+      }
 
-    .heading {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 0.95em;
-      font-weight: 600;
-      color: var(--foreground, hsl(0 0% 95%));
-    }
+      .heading {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 0.95em;
+        font-weight: 600;
+        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+      }
 
-    .icon {
-      width: 18px;
-      height: 18px;
-      opacity: 0.7;
-    }
-  `;
-
-  constructor() {
-    super();
-  }
+      .icon {
+        width: 18px;
+        height: 18px;
+        opacity: 0.7;
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
@@ -48,4 +50,4 @@ export class ConsentsoftwareHeader extends LitElement {
       </div>
     `;
   }
-}
+}