@cupra/ui-kit 2.0.0-canary.23 → 2.0.0-canary.231

package/dist-react/esm/components/ds-tag/styles/seat.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/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.moonlate,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.white,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.copper,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.rio-green,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.electric,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.yellow,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.red,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.green,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .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='seat']) .container.black,
+    :host([data-ui-kit-theme='seat']) .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 seatStyles };

package/dist-react/esm/components/ds-text/ds-text.js

@@ -1,83 +1,100 @@
-import { UiKitElement as h } from "../base/UiKitElement.js";
-import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as g } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as y, html as n } 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { unsafeHTML as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
-import { commonStyles as d } from "./styles/common.styles.js";
-var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (l, s, a, i) => {
-  for (var o = i > 1 ? void 0 : i ? T(s, a) : s, p = l.length - 1, m; p >= 0; p--)
-    (m = l[p]) && (o = (i ? m(s, a, o) : m(o)) || o);
-  return i && o && $(s, a, o), o;
-};
-let t = class extends h {
-  constructor() {
-    super(...arguments), this.size = "medium", this.weight = "regular", this.variant = "body", this.mode = "light";
-  }
-  get classes() {
-    return {
-      container: !0,
-      [`size-${this.size}`]: !!this.size,
-      [`mode-${this.mode}`]: !!this.mode,
-      [`weight-${this.weight}`]: !!this.weight,
-      [`variant-${this.variant}`]: !!this.variant,
-      uppercase: this.uppercase
-    };
-  }
-  get customElementTemplate() {
-    return !this.htmlTagName || !this.value ? y : n`${v(`<${this.htmlTagName} class="text">${this.value}</${this.htmlTagName}>`)}`;
-  }
-  get styles() {
-    return g`
-                <style>
-                    .container {
-                        color: ${this.color || "var(--ds-text-color)"}
-                    }
-                </style>
-            `;
-  }
-  render() {
-    return n`
-            ${this.styles}
-            <div data-testid="ds-text-container" class=${f(this.classes)}>
-                ${this.customElementTemplate}
-                <slot></slot>
-            </div>
+import { nothing as e } 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 t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedNodes as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { classMap as s } 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 { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
+import { objectConverter as l } from "../../utils/objectConverter.js";
+import { html as u, unsafeStatic as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/static.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/static-html.js";
+import { styleMap as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/style-map.js";
+import { commonStyles as p } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as m } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as h } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as g } from "./styles/seat-legacy.styles.js";
+import { seatStyles as _ } from "./styles/seat.styles.js";
+//#region src/components/ds-text/ds-text.ts
+var v, y = /* @__PURE__ */ new Set([
+	"span",
+	"p",
+	"strong",
+	"em",
+	"small",
+	"label",
+	"div",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+]), b = (v = class extends c(i) {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.emphasis = "secondary", this.variant = "body", this.htmlTagName = "span", this.mode = "light";
+	}
+	get classes() {
+		var e, t;
+		let n = typeof this.size == "string" ? this.size : this.size[this.viewport];
+		return {
+			container: !0,
+			[`size-${n}`]: !!n,
+			[`mode-${this.mode}`]: !!this.mode,
+			[`emphasis-${this.emphasis}`]: !!this.emphasis,
+			[`variant-${this.variant}`]: !!this.variant,
+			"display-contents": (e = this.slotedNodes) == null || (t = e.some) == null ? void 0 : t.call(e, (e) => e.nodeType !== Node.TEXT_NODE),
+			uppercase: this.uppercase
+		};
+	}
+	onSlotChange() {
+		this.requestUpdate();
+	}
+	render() {
+		let t = (this.htmlTagName ?? "").toLowerCase(), n = y.has(t) ? t : "span", r = d(n);
+		return u`
+            <${r} 
+                part="container" 
+                data-testid="ds-text-container" 
+                class=${s(this.classes)}
+                style=${f({ color: this.color || "var(--ui-kit-private-text-color)" })}
+            >
+                ${this.value ? this.value : e}
+                <slot @slotchange=${this.onSlotChange}></slot>
+            </${r}>
         `;
-  }
-};
-t.styles = [d];
-e([
-  r({ type: String })
-], t.prototype, "size", 2);
-e([
-  r({ type: String })
-], t.prototype, "weight", 2);
-e([
-  r({ type: String })
-], t.prototype, "variant", 2);
-e([
-  r({ type: String, attribute: "html-tag-name" })
-], t.prototype, "htmlTagName", 2);
-e([
-  r({ type: String })
-], t.prototype, "value", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "color", 2);
-e([
-  r({ type: Boolean, converter: u, reflect: !0 })
-], t.prototype, "uppercase", 2);
-t = e([
-  c("ds-text")
-], t);
-export {
-  t as DsText
-};
+	}
+}, v.styles = [
+	p,
+	m,
+	_,
+	h,
+	g
+], v);
+r([t({
+	type: String,
+	converter: l
+})], b.prototype, "size", void 0), r([t({ type: String })], b.prototype, "emphasis", void 0), r([t({ type: String })], b.prototype, "variant", void 0), r([t({
+	type: String,
+	attribute: "html-tag-name"
+})], b.prototype, "htmlTagName", void 0), r([t({ type: String })], b.prototype, "value", void 0), r([t({
+	type: String,
+	reflect: !0
+})], b.prototype, "mode", void 0), r([t({
+	type: String,
+	reflect: !0
+})], b.prototype, "color", void 0), r([t({
+	type: Boolean,
+	converter: o,
+	reflect: !0
+})], b.prototype, "uppercase", void 0), r([n({
+	slot: "",
+	flatten: !0
+})], b.prototype, "slotedNodes", void 0), b = r([a("ds-text")], b);
+//#endregion
+export { b as DsText };

package/dist-react/esm/components/ds-text/styles/common.styles.js

@@ -1,14 +1,18 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../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 { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const n = t`
-    :host {
+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-text/styles/common.styles.ts
+var t = e`
+    :host,
+    .display-contents {
         display: contents;
     }
 
-    ::slotted(*),
-    .text {
+    .container {
+        margin: 0;
+    }
+
+    .container *,
+    ::slotted(*) {
         color: inherit;
         font-size: inherit;
         font-weight: inherit;
@@ -16,14 +20,9 @@ const n = t`
         margin: 0;
     }
 
-    .text + ::slotted(*) {
-        display: none;
-    }
-
     .uppercase {
         text-transform: uppercase;
     }
 `;
-export {
-  n as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -0,0 +1,109 @@
+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-text/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        --ui-kit-private-text-color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary, 'cupra-screen');
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-display.emphasis-primary {
+        font-weight: var(--ds-typography-weight-display-primary, 300);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.emphasis-primary {
+        font-weight: var(--ds-typography-weight-headline-primary, 300);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.emphasis-secondary {
+        font-weight: var(--ds-typography-weight-headline-secondary, 400);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.emphasis-primary {
+        font-weight: var(--ds-typography-weight-body-primary, 400);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.emphasis-secondary {
+        font-weight: var(--ds-typography-weight-body-secondary, 350);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.emphasis-tertiary {
+        font-weight: var(--ds-typography-weight-body-tertiary, 500);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-display.size-large {
+        font-size: var(--ds-typography-size-display-l, 40px);
+        line-height: var(--ds-typography-height-display-l, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-display.size-medium {
+        font-size: var(--ds-typography-size-display-m, 40px);
+        line-height: var(--ds-typography-height-display-m, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-xlarge {
+        font-size: var(--ds-typography-size-headline-xl, 40px);
+        line-height: var(--ds-typography-height-headline-xl, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-large {
+        font-size: var(--ds-typography-size-headline-l, 40px);
+        line-height: var(--ds-typography-height-headline-l, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-medium {
+        font-size: var(--ds-typography-size-headline-m, 32px);
+        line-height: var(--ds-typography-height-headline-m, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-small {
+        font-size: var(--ds-typography-size-headline-s, 24px);
+        line-height: var(--ds-typography-height-headline-s, 32px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-xsmall {
+        font-size: var(--ds-typography-size-headline-xs, 18px);
+        line-height: var(--ds-typography-height-headline-xs, 26px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-xxsmall {
+        font-size: var(--ds-typography-size-headline-xxs, 16px);
+        line-height: var(--ds-typography-height-headline-xxs, 24px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-large {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-medium {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-small {
+        font-size: var(--ds-typography-size-body-s, 12px);
+        line-height: var(--ds-typography-height-body-s, 16px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-xsmall {
+        font-size: var(--ds-typography-size-body-xs, 10px);
+        line-height: var(--ds-typography-height-body-xs, 14px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-text/styles/cupra.styles.js

@@ -0,0 +1,115 @@
+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-text/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        font-family: var(--ds-typeface-font-family-cupra-screen);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.mode-light {
+        --ui-kit-private-text-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.mode-dark {
+        --ui-kit-private-text-color: white;
+    }
+
+    /* Emphasis variants */
+    :host([data-ui-kit-theme='cupra']) .variant-display.emphasis-primary {
+        font-weight: 300;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.emphasis-primary {
+        font-weight: 300;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.emphasis-secondary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.emphasis-primary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.emphasis-secondary {
+        font-weight: 350;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.emphasis-tertiary {
+        font-weight: 500;
+    }
+
+    /* Variant and size combinations */
+    /* Display variant */
+    :host([data-ui-kit-theme='cupra']) .variant-display.size-large {
+        font-size: var(--ds-font-size-display-l, 40px);
+        line-height: var(--ds-font-height-display-l, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-display.size-medium {
+        font-size: var(--ds-font-size-display-m, 40px);
+        line-height: var(--ds-font-height-display-m, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    /* Headline variant */
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-xlarge {
+        font-size: var(--ds-font-size-headline-xl, 40px);
+        line-height: var(--ds-font-height-headline-xl, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-large {
+        font-size: var(--ds-font-size-headline-l, 40px);
+        line-height: var(--ds-font-height-headline-l, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-medium {
+        font-size: var(--ds-font-size-headline-m, 32px);
+        line-height: var(--ds-font-height-headline-m, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-small {
+        font-size: var(--ds-font-size-headline-s, 24px);
+        line-height: var(--ds-font-height-headline-s, 32px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-xsmall {
+        font-size: var(--ds-font-size-headline-xs, 18px);
+        line-height: var(--ds-font-height-headline-xs, 26px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    /* Body variant */
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-large {
+        font-size: var(--ds-font-size-body-l, 16px);
+        line-height: var(--ds-font-height-body-l, 24px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-medium {
+        font-size: var(--ds-font-size-body-m, 14px);
+        line-height: var(--ds-font-height-body-m, 20px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-small {
+        font-size: var(--ds-font-size-body-s, 12px);
+        line-height: var(--ds-font-height-body-s, 16px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-xsmall {
+        font-size: var(--ds-font-size-body-xs, 10px);
+        line-height: var(--ds-font-height-body-xs, 14px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

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

@@ -0,0 +1,83 @@
+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-text/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        --ui-kit-private-text-color: var(--dg-color-text-strong);
+        font-family: var(--dg-font-family-base);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.emphasis-primary {
+        font-weight: 700;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.emphasis-secondary {
+        font-weight: 700;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.emphasis-tertiary {
+        font-weight: 700;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.emphasis-primary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.emphasis-secondary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.emphasis-tertiary {
+        font-weight: 500;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-large {
+        font-size: var(--dg-font-size-headline-l);
+        line-height: var(--dg-font-height-headline-l);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-medium {
+        font-size: var(--dg-font-size-headline-m);
+        line-height: var(--dg-font-height-headline-m);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-small {
+        font-size: var(--dg-font-size-headline-s);
+        line-height: var(--dg-font-height-headline-s);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-xsmall {
+        font-size: var(--dg-font-size-headline-xs);
+        line-height: var(--dg-font-height-headline-xs);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-large {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-height-body-l);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-medium {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-height-body-m);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-small {
+        font-size: var(--dg-font-size-body-s);
+        line-height: var(--dg-font-height-body-s);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-xsmall {
+        font-size: var(--dg-font-size-body-xs);
+        line-height: var(--dg-font-height-body-xs);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };