Added new Base-Components

2026-02-13 16:32:18 +01:00
parent d42d1510e9
commit 6b9d59ae2d
5 changed files with 391 additions and 277 deletions
@@ -0,0 +1,79 @@
+// components/ui-badge.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type BadgeVariant = 'accent' | 'success' | 'warning' | 'muted' | 'error';
+
+@customElement('ui-badge')
+export class UiBadge extends LitElement {
+    static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.3rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      border-radius: 2rem;
+      border: 1px solid transparent;
+      white-space: nowrap;
+    }
+
+    .badge.accent {
+      color: var(--color-accent);
+      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+      border-color: color-mix(
+        in srgb,
+        var(--color-accent) 25%,
+        transparent
+      );
+    }
+
+    .badge.success {
+      color: #30a46c;
+      background: color-mix(in srgb, #30a46c 10%, transparent);
+      border-color: color-mix(in srgb, #30a46c 25%, transparent);
+    }
+
+    .badge.warning {
+      color: #e79d13;
+      background: color-mix(in srgb, #e79d13 10%, transparent);
+      border-color: color-mix(in srgb, #e79d13 25%, transparent);
+    }
+
+    .badge.muted {
+      color: color-mix(in srgb, var(--color-text) 45%, transparent);
+      background: color-mix(in srgb, var(--color-text) 6%, transparent);
+      border-color: var(--color-border);
+    }
+
+    .badge.error {
+        color: #e5484d;
+        background: color-mix(in srgb, #e5484d 10%, transparent);
+        border-color: color-mix(in srgb, #e5484d 25%, transparent);
+    }
+
+
+    ::slotted(svg) {
+      width: 0.85rem;
+      height: 0.85rem;
+      flex-shrink: 0;
+    }
+  `;
+
+    @property() variant: BadgeVariant = 'accent';
+
+    render() {
+        return html`
+    <span class="badge ${this.variant}">
+        <slot></slot>
+    </span>
+    `;
+    }
+}