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

@@ -1,9 +1,16 @@
-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,
+  property,
+} from '@design.estate/dees-element';
 
 @customElement('consentsoftware-mainselection')
-export class ConsentsoftwareMainSelection extends LitElement {
+export class ConsentsoftwareMainSelection extends DeesElement {
   public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`;
 
   @property({ type: Boolean })
@@ -12,55 +19,54 @@ export class ConsentsoftwareMainSelection extends LitElement {
   @property({ type: Boolean })
   public accessor selected = false;
 
-  public static styles = css`
-    :host {
-      display: block;
-      position: relative;
-    }
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
 
-    .maincontainer {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      padding: 8px 0;
-    }
-
-    @media (max-width: 560px) {
       .maincontainer {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        padding: 8px 0;
       }
-    }
 
-    .itemBox {
-      padding: 12px 8px;
-      text-align: center;
-      border-right: 1px solid var(--border, hsl(0 0% 18%));
-    }
+      @media (max-width: 560px) {
+        .maincontainer {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 4px;
+        }
+      }
 
-    .itemBox:last-child {
-      border-right: none;
-    }
-
-    @media (max-width: 560px) {
       .itemBox {
-        padding: 10px 8px;
+        padding: 12px 8px;
+        text-align: center;
+        border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+      }
+
+      .itemBox:last-child {
         border-right: none;
-        border-bottom: 1px solid var(--border, hsl(0 0% 18%));
       }
 
-      .itemBox:nth-child(odd) {
-        border-right: 1px solid var(--border, hsl(0 0% 18%));
-      }
+      @media (max-width: 560px) {
+        .itemBox {
+          padding: 10px 8px;
+          border-right: none;
+          border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+        }
 
-      .itemBox:nth-last-child(-n+2) {
-        border-bottom: none;
-      }
-    }
-  `;
+        .itemBox:nth-child(odd) {
+          border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
+        }
 
-  constructor() {
-    super();
-  }
+        .itemBox:nth-last-child(-n+2) {
+          border-bottom: none;
+        }
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
@@ -81,5 +87,5 @@ export class ConsentsoftwareMainSelection extends LitElement {
     `;
   }
 
-  public async getResults(mouseEvent) {}
+  public async getResults() {}
 }