@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.232

package/dist-react/esm/components/ds-icon-button/ds-icon-button.js

@@ -16,8 +16,12 @@ import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
 import { objectConverter as d } from "../../utils/objectConverter.js";
 import { choose as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/choose.js";
 import { buttonStyles 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-icon-button/ds-icon-button.ts
-var m = class extends u(i) {
+var v = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
 	}
@@ -92,46 +96,52 @@ var m = class extends u(i) {
 		])}
         `;
 	}
-}, h = (m.styles = [p], m);
+}, y = (v.styles = [
+	p,
+	m,
+	_,
+	h,
+	g
+], v);
 r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "variant", void 0), r([n({
+})], y.prototype, "variant", void 0), r([n({
 	type: String,
 	attribute: "custom-background"
-})], h.prototype, "customBackground", void 0), r([n({
+})], y.prototype, "customBackground", void 0), r([n({
 	type: String,
 	attribute: "custom-color"
-})], h.prototype, "customColor", void 0), r([n({
+})], y.prototype, "customColor", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "mode", void 0), r([n({
+})], y.prototype, "mode", void 0), r([n({
 	type: String,
 	converter: d
-})], h.prototype, "size", void 0), r([n({
+})], y.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], h.prototype, "disabled", void 0), r([n({
+})], y.prototype, "disabled", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], h.prototype, "iconName", void 0), r([n({
+})], y.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], h.prototype, "htmlTagName", void 0), r([n({
+})], y.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label"
-})], h.prototype, "dataAriaLabel", void 0), r([n({
+})], y.prototype, "dataAriaLabel", void 0), r([n({
 	type: String,
 	attribute: "data-aria-pressed"
-})], h.prototype, "dataAriaPressed", void 0), r([n({
+})], y.prototype, "dataAriaPressed", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "href", void 0), r([n({
+})], y.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "rel", void 0), r([n({
+})], y.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "target", void 0), h = r([a("ds-icon-button")], h);
+})], y.prototype, "target", void 0), y = r([a("ds-icon-button")], y);
 //#endregion
-export { h as DsIconButton };
+export { y as DsIconButton };

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

@@ -0,0 +1,539 @@
+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-icon-button/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .button.custom {
+        --ui-kit-private-button-custom-bg-hover: color-mix(in srgb, var(--ui-kit-private-button-custom-bg) 80%, black);
+        --ui-kit-private-button-custom-bg-pressed: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-bg) 65%,
+            black
+        );
+        --ui-kit-private-button-custom-bg-disabled: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-bg) 40%,
+            transparent
+        );
+        --ui-kit-private-button-custom-color-hover: var(--ui-kit-private-button-custom-color);
+        --ui-kit-private-button-custom-color-pressed: var(--ui-kit-private-button-custom-color);
+        --ui-kit-private-button-custom-color-disabled: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-color) 40%,
+            transparent
+        );
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom) {
+        border-width: var(--ds-icon-button-border-width-base, 1px);
+        border-style: solid;
+        outline-color: transparent;
+        border-radius: var(--ds-icon-button-border-radius-base, 6px);
+        background: var(--ui-kit-private-button-custom-bg, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+        --ui-kit-icon-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).xlarge {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).large {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).medium {
+        height: var(--ds-sizing-40, 40px);
+        width: var(--ds-sizing-40, 40px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).small {
+        height: var(--ds-sizing-36, 36px);
+        width: var(--ds-sizing-36, 36px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-default,
+            linear-gradient(47deg, #fafafa 0%, #fafafa 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-default, #09090b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-default,
+            linear-gradient(179deg, #fafafa26 0%, #c3c3cb0d 85%, #c3c3cb1a 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-default,
+            linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-default, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-default, #fafafa);
+        border-radius: var(--ds-border-radius-full, 100000px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-hover,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-hover, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-hover,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-hover, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-hover,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-hover, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked:hover {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-hover, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom):hover {
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-focus,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-focus, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-focus,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-focus, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary:focus-visible {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-focus,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-focus, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked:focus-visible {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-focus, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded:focus-visible {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom):focus-visible {
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-icon-button-outline-color-focus, #6b8494);
+        outline-width: var(--ds-border-width-l, 2px);
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-pressed,
+            linear-gradient(47deg, #aeaeb7 0%, #aeaeb7 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-pressed, #18181b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-pressed,
+            linear-gradient(179deg, #fafafa4d 0%, #c3c3cb26 95%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-pressed, #aeaeb7);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-pressed,
+            linear-gradient(47deg, #6c472f 0%, #4e3322 45%, #392619 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-pressed, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked:active {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom):active {
+        background: var(--ui-kit-private-button-custom-bg-pressed, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-primary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-secondary-disabled, #09090b4d);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-quaternary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked.disabled {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).disabled {
+        background: var(--ui-kit-private-button-custom-bg-disabled, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button.tag-custom {
+        display: contents;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom ::slotted(*) {
+        cursor: pointer;
+        justify-content: center;
+        outline-style: solid;
+        display: inline-flex;
+        text-decoration: none;
+        align-items: center;
+        box-sizing: border-box;
+        border-width: var(--ds-icon-button-border-width-base, 1px);
+        border-style: solid;
+        outline-color: transparent;
+        border-radius: var(--ds-icon-button-border-radius-base, 6px);
+        background: var(--ui-kit-private-button-custom-bg, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+        --ui-kit-icon-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-default,
+            linear-gradient(47deg, #fafafa 0%, #fafafa 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-default, #09090b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-default,
+            linear-gradient(179deg, #fafafa26 0%, #c3c3cb0d 85%, #c3c3cb1a 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-default,
+            linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-default, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-hover,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-hover, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-hover,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-hover, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-hover,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-hover, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked:hover {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-hover, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom:hover ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-focus,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-focus, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-focus,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-focus, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary:focus-within {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-focus,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-focus, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked:focus-within {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-focus, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded:focus-within {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom ::slotted(*:focus-visible) {
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-icon-button-outline-color-focus, #6b8494);
+        outline-width: var(--ds-border-width-l, 2px);
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-pressed,
+            linear-gradient(47deg, #aeaeb7 0%, #aeaeb7 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-pressed, #18181b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-pressed,
+            linear-gradient(179deg, #fafafa4d 0%, #c3c3cb26 95%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-pressed, #aeaeb7);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-pressed,
+            linear-gradient(47deg, #6c472f 0%, #4e3322 45%, #392619 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-pressed, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked:active {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom:active ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-pressed, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-primary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-secondary-disabled, #09090b4d);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-quaternary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked.disabled {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom ::slotted(*:disabled),
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.disabled ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-disabled, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.xlarge ::slotted(*) {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.large ::slotted(*) {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.medium ::slotted(*) {
+        height: var(--ds-sizing-40, 40px);
+        width: var(--ds-sizing-40, 40px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.small ::slotted(*) {
+        height: var(--ds-sizing-36, 36px);
+        width: var(--ds-sizing-36, 36px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .xlarge ::slotted(*) {
+        height: 2rem;
+        --ui-kit-icon-height: 2rem;
+        width: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted(*) {
+        height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        width: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted(*) {
+        height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .small ::slotted(*) {
+        height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .xlarge .icon {
+        --ui-kit-icon-height: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .icon {
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .small .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };