@cupra/ui-kit 2.0.0-canary.24 → 2.0.0-canary.241

package/dist/esm/components/ds-tabs/styles/seat.styles.js

@@ -0,0 +1,221 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-tabs/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-blur::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        inset-inline-start: 0;
+        background: var(--ui-kit-private-blur-background);
+        -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        border-radius: var(--ui-kit-private-blur-border-radius, inherit);
+        border: var(--ui-kit-private-blur-border, inherit);
+        pointer-events: none;
+        z-index: -1;
+        will-change: filter;
+    }
+
+    :host([data-ui-kit-theme='seat']) {
+        display: block;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-container {
+        --ui-kit-private-blur-background: transparent;
+        --ui-kit-private-blur-size: 2.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) nav {
+        position: relative;
+    }
+
+    :host([data-ui-kit-theme='seat']) nav:focus {
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary .nav-container {
+        --ui-kit-private-blur-background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.302));
+        --ui-kit-private-blur-size: 3.75rem;
+        --ui-kit-private-blur-border-radius: var(--ds-border-radius-xxs, 4px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary nav {
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        box-shadow: 0 0.25rem 0.25rem 0 var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab']) {
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        z-index: 1;
+        background: none;
+        border-bottom: 1px solid var(--ds-field-border-color-default);
+        padding: var(--ui-kit-private-tab-vertical-padding) var(--ui-kit-private-tab-horizontal-padding);
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='tab']) {
+        --ui-kit-private-tab-vertical-padding: var(--ds-spacing-s-5);
+        --ui-kit-private-tab-horizontal-padding: var(--ds-spacing-m-1);
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large ::slotted([slot='tab']) {
+        --ui-kit-private-tab-vertical-padding: var(--ds-spacing-m-1);
+        --ui-kit-private-tab-horizontal-padding: var(--ds-spacing-m-3);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab']:hover) {
+        background: var(--ui-kit-tabs-tab-background-hover, var(--ds-color-control-bg-hover));
+        color: var(--ds-color-text-default);
+        border-bottom-color: var(--ds-field-border-color-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) :not(.disabled) ::slotted([slot='tab']:focus-visible) {
+        box-shadow: inset 0 0 0 0.125rem var(--ds-color-border-focus-ring);
+        outline: none;
+        background: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab']):active {
+        color: var(--ds-color-text-default);
+        border-bottom-color: var(--ds-color-control-border-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab'][selected]) {
+        -webkit-text-stroke-width: 0.05rem;
+        color: var(--ds-color-text-default);
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab'][selected])::before {
+        content: '';
+        position: absolute;
+        width: auto;
+        height: 0.25rem;
+        border-radius: var(--ds-border-radius-xs) var(--ds-border-radius-xs) 0 0;
+        background: var(--ui-kit-tabs-indicator-background, var(--ds-color-surface-selected));
+        transform: none;
+        pointer-events: none;
+        z-index: 0;
+        bottom: 0;
+        inset-inline: var(--ui-kit-private-tab-horizontal-padding);
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child) {
+        margin-inline-end: 0.0625rem;
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child)::after {
+        content: '';
+        position: absolute;
+        inset-inline-end: 0;
+        margin-inline-end: -0.0625rem;
+        width: 0.0625rem;
+        height: 2rem;
+        border-radius: var(--ds-border-radius-00, 0);
+        background: var(--ds-divider-bg-color-primary, rgba(250, 250, 250, 0.1));
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled ::slotted([slot='tab']) {
+        color: var(--ds-color-text-disabled, #5a5c67);
+        background: none;
+        border-bottom-color: var(--ds-field-border-color-disabled);
+        pointer-events: none;
+        cursor: default;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-arrow {
+        position: absolute;
+        z-index: 1;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-arrow.left {
+        inset-inline-start: 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-arrow.right {
+        inset-inline-end: 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 20rem;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 30rem;
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 44rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 39.375rem;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 56rem;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 75rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .xsmall {
+        max-width: 20rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 30rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 44rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 39.375rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 56rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 75rem;
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist/esm/components/ds-tabs/theme-config.js

@@ -1,14 +1,8 @@
-const a = {
-  cupra: {
-    "icon-button-variant": "primary"
-  },
-  "cupra-diagonal": {
-    "icon-button-variant": "naked"
-  },
-  seat: {
-    "icon-button-variant": "primary"
-  }
-};
-export {
-  a as themeConfig
+//#region src/components/ds-tabs/theme-config.ts
+var e = {
+	cupra: { "icon-button-variant": "primary" },
+	"cupra-diagonal": { "icon-button-variant": "naked" },
+	seat: { "icon-button-variant": "naked" }
 };
+//#endregion
+export { e as themeConfig };

package/dist/esm/components/ds-tag/ds-tag.js

@@ -1,87 +1,87 @@
-import { UiKitElement as b } from "../base/UiKitElement.js";
-import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as f } from "../../utils/booleanConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as m, html as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as v } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { when as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { commonStyles as g, iconStyles as d } from "./styles/common.styles.js";
-var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (r, s, c, n) => {
-  for (var o = n > 1 ? void 0 : n ? P(s, c) : s, l = r.length - 1, a; l >= 0; l--)
-    (a = r[l]) && (o = (n ? a(s, c, o) : a(o)) || o);
-  return n && o && C(s, c, o), o;
-};
-let t = class extends b {
-  constructor() {
-    super(...arguments), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left", this.color = "black";
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.color]: !0
-    };
-  }
-  get iconClasses() {
-    return {
-      icon: !0,
-      clicable: !!this.clickableIcon
-    };
-  }
-  handleClickIcon() {
-    if (!this.clickableIcon) return;
-    const r = new CustomEvent("clickicon", {
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(r);
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: h(this.iconClasses),
-      "icon-name": this.iconName,
-      size: 16,
-      "@click": this.handleClickIcon
-    }) : m;
-  }
-  render() {
-    return this.show ? p`
-                  <div class=${h(this.classes)}>
-                      ${u(this.iconPosition === "left", () => p`${this.iconTemplate}`)}
-                      <slot></slot>
-                      ${u(this.iconPosition === "right", () => p`${this.iconTemplate}`)}
-                  </div>
-              ` : m;
-  }
-};
-t.styles = [g, d];
-e([
-  i({ type: Boolean, converter: f })
-], t.prototype, "show", 2);
-e([
-  i({
-    type: Boolean,
-    converter: f,
-    attribute: "clickable-icon"
-  })
-], t.prototype, "clickableIcon", 2);
-e([
-  i({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 2);
-e([
-  i({ type: String, attribute: "icon-position" })
-], t.prototype, "iconPosition", 2);
-e([
-  i({ type: String, attribute: "color" })
-], t.prototype, "color", 2);
-e([
-  v()
-], t.prototype, "onClickHandler", 2);
-t = e([
-  y("ds-tag")
-], t);
-export {
-  t as DsTag
-};
+import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as s } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
+import { classMap as l } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
+import { ifDefined as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
+import { commonStyles as d, iconStyles as f } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as p } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as m } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as h } from "./styles/seat-legacy.styles.js";
+import { seatStyles as g } from "./styles/seat.styles.js";
+//#region src/components/ds-tag/ds-tag.ts
+var _ = class extends a {
+	constructor(...e) {
+		super(...e), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left";
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.variant || this.color]: !0
+		};
+	}
+	get iconClasses() {
+		return {
+			icon: !0,
+			[`icon-${this.iconPosition}`]: !!this.iconPosition,
+			clicable: !!this.clickableIcon
+		};
+	}
+	handleClickIcon() {
+		if (!this.clickableIcon) return;
+		let e = new CustomEvent("clickicon", {
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(e);
+	}
+	get iconTemplate() {
+		return this.iconName ? c`<ds-icon class=${l(this.iconClasses)} icon-name=${u(this.iconName)} size="16" @click=${this.handleClickIcon}></ds-icon>` : t;
+	}
+	render() {
+		return this.show ? e`
+                <div class=${l(this.classes)}>
+                    <slot></slot>
+                    ${this.iconTemplate}
+                </div>
+            ` : t;
+	}
+}, v = (_.styles = [
+	d,
+	f,
+	p,
+	g,
+	m,
+	h
+], _);
+i([n({
+	type: Boolean,
+	converter: s
+})], v.prototype, "show", void 0), i([n({
+	type: Boolean,
+	converter: s,
+	attribute: "clickable-icon"
+})], v.prototype, "clickableIcon", void 0), i([n({
+	type: String,
+	attribute: "icon-name"
+})], v.prototype, "iconName", void 0), i([n({
+	type: String,
+	attribute: "icon-position"
+})], v.prototype, "iconPosition", void 0), i([n({
+	type: String,
+	attribute: "color"
+})], v.prototype, "color", void 0), i([n({
+	type: String,
+	attribute: "variant"
+})], v.prototype, "variant", void 0), i([r()], v.prototype, "onClickHandler", void 0), v = i([o("ds-tag")], v);
+//#endregion
+export { v as DsTag };

package/dist/esm/components/ds-tag/styles/common.styles.js

@@ -1,20 +1,33 @@
-import { cssWithTokens as n } from "../../../utils/cssWithTokens.js";
-const i = n`
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-tag/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-block;
     }
-    
+
     .container {
         display: inline-flex;
         justify-content: center;
         align-items: center;
     }
-`, o = n`
+`, n = e`
     .icon.clicable {
         cursor: pointer;
     }
+
+    .icon-start,
+    .icon-left {
+        order: -1;
+    }
+
+    :host(:dir(rtl)) .icon-left {
+        order: 0;
+    }
+
+    :host(:dir(rtl)) .icon-right {
+        order: -1;
+    }
 `;
-export {
-  i as commonStyles,
-  o as iconStyles
-};
+//#endregion
+export { t as commonStyles, n as iconStyles };

package/dist/esm/components/ds-tag/styles/cupra-diagonal.styles.js

@@ -0,0 +1,76 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-tag/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        padding: var(--ds-spacing-s-3, 4px) var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-l, 20px);
+        gap: var(--ds-spacing-s-4, 6px);
+        font: 400 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        color: var(--ui-kit-private-tag-color);
+        background-color: var(--ui-kit-private-tag-background-color);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.moonlate,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.default {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-default, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-default, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-default, #404759);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.white,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.contrast {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-contrast, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-contrast, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-contrast, #f3f4f6);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.copper,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.accent-02 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-02, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-02, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-02, #885a3b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.rio-green,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.accent-03 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-03, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-03, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-03, #505643);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.electric,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.accent-01 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-01, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-01, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-01, #0e6261);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.yellow,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.warning {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-warning, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-warning, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-warning, #ffdf8f);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.red,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.error {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-error, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-error, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-error, #ff918f);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.green,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.success {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-success, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-success, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-success, #d9fccf);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.subtle {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-subtle, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-subtle, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-subtle, #09090b4d);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.black,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-disabled, #aeaeb7);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-disabled, #aeaeb7);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-disabled, #34353c);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist/esm/components/ds-tag/styles/cupra.styles.js

@@ -0,0 +1,48 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-tag/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        padding: 0.25rem 0.5rem;
+        border-radius: 2px;
+        gap: 0.25rem;
+        font: var(--ds-font-cupra-light-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.black {
+        background-color: var(--ds-color-black);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.petrol {
+        background-color: var(--ds-color-petrol-100);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.copper {
+        background-color: var(--ds-color-copper-100);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.grey {
+        background-color: var(--ds-color-dark-grey);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.white {
+        background-color: var(--ds-color-white);
+        color: var(--ds-color-black);
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.desert {
+        background-color: var(--ds-color-desert-sand-100);
+        color: var(--ds-color-black);
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.orange {
+        background-color: var(--ds-color-orange-50);
+        color: var(--ds-color-black);
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist/esm/components/ds-tag/styles/seat-legacy.styles.js

@@ -0,0 +1,26 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-tag/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        padding: var(--dg-spacing-s-3) var(--dg-spacing-s-5);
+        border-radius: var(--dg-border-radius-02);
+        gap: var(--dg-spacing-s-3);
+        font: 500 var(--dg-font-size-body-s) / var(--dg-font-height-body-s) var(--dg-font-family-base);
+        color: var(--dg-color-text-strong);
+        --ui-kit-icon-color: var(--dg-color-text-strong);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.moonlate {
+        background-color: var(--dg-tag-bg-color-moonslate);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.white {
+        background-color: var(--dg-tag-bg-color-white);
+        color: var(--dg-color-text-inverted);
+        --ui-kit-icon-color: var(--dg-color-text-inverted);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.copper {
+        background-color: var(--dg-tag-bg-color-copper);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };