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

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

@@ -0,0 +1,269 @@
+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-sidebar-navigation/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) {
+        --ui-kit-private-sidebar-navigation-nav-height: 5.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .nav {
+        padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-2, 16px);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5, 8px);
+        background: var(--ds-color-surface-container-hover, rgba(250, 250, 250, 0.1));
+        -webkit-backdrop-filter: blur(3.75rem);
+        backdrop-filter: blur(3.75rem);
+
+        height: var(--ui-kit-private-sidebar-navigation-nav-height, 88px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .aside {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        align-items: center;
+        justify-content: center;
+        gap: var(--ds-spacing-m-2, 16px);
+        flex: 1 1 auto;
+
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-font-letter-spacing-0-5, 0.5px);
+
+        /* ellipsis styles */
+        overflow: hidden;
+        width: 100%;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .helper-text-container {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        flex: 1 1 auto;
+
+        /* ellipsis styles */
+        min-width: 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-text']) {
+        color: var(--ds-color-text-default, #fafafa);
+
+        font-size: var(--ds-font-size-14, 14px);
+        line-height: var(--ds-font-line-height-20, 20px);
+        flex: 0 0 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-helper-text']) {
+        color: var(--ds-button-text-color-link-default, #fafafa);
+
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+        /* ellipsis styles */
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-icon']) {
+        flex: 0 0 auto;
+        --ui-kit-icon-color: var(--ds-button-text-color-link-default, #fafafa);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .actions-container {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        align-self: stretch;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='main-cta']) {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .modal {
+        visibility: hidden;
+        box-sizing: border-box;
+
+        -webkit-backdrop-filter: blur(0.75rem);
+
+        backdrop-filter: blur(0.75rem);
+        background: var(--ds-color-bg-overlay, rgba(9, 9, 11, 0.8));
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        position: absolute;
+        width: 100%;
+        height: calc(100% - var(--ui-kit-private-sidebar-navigation-nav-height));
+        padding: var(--ds-spacing-m-2, 16px);
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s, 16px);
+        flex-shrink: 0;
+        left: 0;
+        top: 0;
+        z-index: var(--ds-z-index-modal);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .open .modal {
+        visibility: visible;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 5.875rem;
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .nav {
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-4, 24px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-18, 18px);
+            line-height: var(--ds-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+            --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .nav {
+            flex-direction: row;
+            padding: var(--ds-spacing-m-2, 16px) var(--ds-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 6.125rem;
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .nav {
+            flex-direction: column;
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-2, 16px);
+            align-items: flex-start;
+            gap: var(--ds-spacing-s-5, 8px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-18, 18px);
+            line-height: var(--ds-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-m, 14px);
+            line-height: var(--ds-typography-height-body-m, 20px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+            --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .actions-container {
+            flex: 1 1 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='main-cta']) {
+            flex: 1 1 auto;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 7rem;
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+            --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .actions-container {
+            gap: var(--ds-spacing-s-5, 8px);
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .nav {
+            flex-direction: row;
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,268 @@
+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-sidebar-navigation/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) {
+        --ui-kit-private-sidebar-navigation-nav-height: 5.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .nav {
+        padding: var(--dg-spacing-m-1, 12px) var(--dg-spacing-m-2, 16px);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--dg-spacing-s-5, 8px);
+        background: var(--dg-color-surface-container-hover, rgba(250, 250, 250, 0.1));
+        -webkit-backdrop-filter: blur(3.75rem);
+        backdrop-filter: blur(3.75rem);
+
+        height: var(--ui-kit-private-sidebar-navigation-nav-height, 88px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .aside {
+        display: flex;
+        padding: var(--dg-spacing-s-1, 0);
+        align-items: center;
+        gap: var(--dg-spacing-m-2, 16px);
+        flex: 1 1 auto;
+
+        font-family: var(--dg-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--dg-font-letter-spacing-0-5, 0.5px);
+
+        /* ellipsis styles */
+        overflow: hidden;
+        width: 100%;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .helper-text-container {
+        display: flex;
+        padding: var(--dg-spacing-s-1, 0);
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--dg-spacing-s-5, 8px);
+        flex: 1 1 auto;
+
+        /* ellipsis styles */
+        min-width: 0;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-text']) {
+        color: var(--dg-color-text-default, #fafafa);
+
+        font-size: var(--dg-font-size-14, 14px);
+        line-height: var(--dg-font-line-height-20, 20px);
+        flex: 0 0 auto;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-helper-text']) {
+        color: var(--dg-button-text-color-link-default, #fafafa);
+
+        font-size: var(--dg-typography-size-body-m, 14px);
+        line-height: var(--dg-typography-height-body-m, 20px);
+        /* ellipsis styles */
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-icon']) {
+        flex: 0 0 auto;
+        --ui-kit-icon-color: var(--dg-button-text-color-link-default, #fafafa);
+        --ui-kit-icon-width: var(--dg-sizing-20, 20px);
+        --ui-kit-icon-height: var(--dg-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .actions-container {
+        display: flex;
+        padding: var(--dg-spacing-s-1, 0);
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--dg-spacing-s-5, 8px);
+        align-self: stretch;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='main-cta']) {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .modal {
+        visibility: hidden;
+        box-sizing: border-box;
+
+        -webkit-backdrop-filter: blur(0.75rem);
+
+        backdrop-filter: blur(0.75rem);
+        background: var(--dg-color-bg-overlay, rgba(9, 9, 11, 0.8));
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        position: absolute;
+        width: 100%;
+        height: calc(100% - var(--ui-kit-private-sidebar-navigation-nav-height));
+        padding: var(--dg-spacing-m-2, 16px);
+        flex-direction: column;
+        gap: var(--dg-spacing-layout-s, 16px);
+        flex-shrink: 0;
+        left: 0;
+        top: 0;
+        z-index: var(--dg-z-index-modal);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .open .modal {
+        visibility: visible;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat-legacy']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 5.875rem;
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .nav {
+            padding: var(--dg-spacing-m-1, 12px) var(--dg-spacing-m-4, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--dg-font-size-18, 18px);
+            line-height: var(--dg-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--dg-typography-size-body-l, 16px);
+            line-height: var(--dg-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--dg-sizing-24, 24px);
+            --ui-kit-icon-height: var(--dg-sizing-24, 24px);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .nav {
+            flex-direction: row;
+            padding: var(--dg-spacing-m-2, 16px) var(--dg-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--dg-font-size-24, 24px);
+            line-height: var(--dg-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--dg-typography-size-body-l, 16px);
+            line-height: var(--dg-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--dg-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat-legacy']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 6.125rem;
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .nav {
+            flex-direction: column;
+            padding: var(--dg-spacing-m-1, 12px) var(--dg-spacing-m-2, 16px);
+            align-items: flex-start;
+            gap: var(--dg-spacing-s-5, 8px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--dg-font-size-18, 18px);
+            line-height: var(--dg-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--dg-typography-size-body-m, 14px);
+            line-height: var(--dg-typography-height-body-m, 20px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--dg-sizing-20, 20px);
+            --ui-kit-icon-height: var(--dg-sizing-20, 20px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .actions-container {
+            flex: 1 1 auto;
+            gap: var(--dg-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='main-cta']) {
+            flex: 1 1 auto;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat-legacy']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 7rem;
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--dg-font-size-24, 24px);
+            line-height: var(--dg-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--dg-typography-size-body-l, 16px);
+            line-height: var(--dg-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--dg-sizing-24, 24px);
+            --ui-kit-icon-height: var(--dg-sizing-24, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .actions-container {
+            gap: var(--dg-spacing-s-5, 8px);
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='seat-legacy']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .nav {
+            flex-direction: row;
+            padding: var(--dg-spacing-m-1, 12px) var(--dg-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--dg-font-size-24, 24px);
+            line-height: var(--dg-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--dg-typography-size-body-l, 16px);
+            line-height: var(--dg-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--dg-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };