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-tabs.ts

@@ -1,59 +1,64 @@
-import { LitElement, html, css, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { property } from 'lit/decorators/property.js';
+import { cssManager, colors } from './shared.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
 
 @customElement('consentsoftware-tabs')
-export class ConsentsoftwareTabs extends LitElement {
+export class ConsentsoftwareTabs extends DeesElement {
   public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
 
-  public static styles = css`
-    :host {
-      display: block;
-      position: relative;
-      background: var(--muted, hsl(0 0% 15%));
-    }
-
-    .tabs {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    .tabs .tab {
-      text-align: center;
-      padding: 8px 0;
-      font-size: 0.8em;
-      font-weight: 500;
-      color: var(--muted-foreground, hsl(0 0% 64%));
-      cursor: pointer;
-      transition: color 0.15s ease;
-    }
-
-    .tabs .tab:hover {
-      color: var(--foreground, hsl(0 0% 95%));
-    }
-
-    @media (max-width: 560px) {
-      .tabs .tab {
-        font-size: 0.75em;
-        padding: 6px 0;
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
       }
-    }
 
-    .selector {
-      position: absolute;
-      width: calc(100% / 3);
-      height: 2px;
-      left: 0;
-      bottom: 0;
-      background: var(--foreground, hsl(0 0% 95%));
-      transition: all 0.2s ease-out;
-      border-radius: 1px;
-    }
-  `;
+      .tabs {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
 
-  constructor() {
-    super();
-  }
+      .tabs .tab {
+        text-align: center;
+        padding: 8px 0;
+        font-size: 0.8em;
+        font-weight: 500;
+        color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
+        cursor: pointer;
+        transition: color 0.15s ease;
+      }
+
+      .tabs .tab:hover {
+        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+      }
+
+      @media (max-width: 560px) {
+        .tabs .tab {
+          font-size: 0.75em;
+          padding: 6px 0;
+        }
+      }
+
+      .selector {
+        position: absolute;
+        width: calc(100% / 3);
+        height: 2px;
+        left: 0;
+        bottom: 0;
+        background: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
+        transition: all 0.2s ease-out;
+        border-radius: 1px;
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
@@ -66,7 +71,7 @@ export class ConsentsoftwareTabs extends LitElement {
     `;
   }
 
-  public async handleClick(mouseEvent) {
+  public async handleClick(mouseEvent: MouseEvent) {
     const target = mouseEvent.target as HTMLElement;
     const tab: HTMLDivElement = target.closest('.tab');
     if (tab) {