@onlive.ai/common-121 0.2.163 → 0.2.184

package/themes/custom/cupra-events.theme.cjs

@@ -0,0 +1,555 @@
+/*! @onlive.ai/common-121 v0.2.184 | © 2026 Onlive.ai */
+"use strict";var e=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var g=(a,o)=>{for(var r in o)e(a,r,{get:o[r],enumerable:!0})},d=(a,o,r,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of s(o))!c.call(a,l)&&l!==r&&e(a,l,{get:()=>o[l],enumerable:!(t=n(o,l))||t.enumerable});return a};var _=a=>d(e({},"__esModule",{value:!0}),a);var p={};g(p,{styles:()=>f});module.exports=_(p);var i=require("lit"),f=i.css`
+:root,
+:host,
+.ol-theme-light {
+  /* Onlive UI Palette - Light Theme */
+  --ol-color-primary-50: rgb(255 255 255);
+  --ol-color-primary-100: rgb(255 255 255);
+  --ol-color-primary-200: rgb(240 240 240);
+  --ol-color-primary-300: rgb(230 230 230);
+  --ol-color-primary-400: rgb(200 200 200);
+  --ol-color-primary-500: rgb(160 160 160);
+  --ol-color-primary-600: rgb(0 0 0);
+  --ol-color-primary-700: rgb(0 0 0);
+  --ol-color-primary-800: rgb(0 0 0);
+  --ol-color-primary-900: rgb(0 0 0);
+  --ol-color-primary-950: rgb(0 0 0);
+
+  /* Cupra Events Theme Specific Variables */
+  --cupra-font-family-book: "CupraBook", sans-serif;
+  --cupra-font-family-light: "CupraLight", sans-serif;
+  --cupra-font-family-medium: "CupraMedium", sans-serif;
+  --cupra-font-family-bold: "CupraBold", sans-serif;
+
+  /* Onlive UI Font and Vars */
+  --ol-font-sans: var(--cupra-font-family-book);
+  --ol-calendar-day-border-radius: 0;
+  --ol-calendar-day-padding: var(--ol-spacing-small) var(--ol-spacing-large);
+  --ol-input-floating-label-background-color: transparent;
+  --ol-input-floating-label-font-size-medium: var(--ol-font-size-x-small);
+}
+
+.ol-theme-dark {
+  /* Onlive UI Palette - Dark Theme */
+  --ol-color-primary-50: rgb(0 0 0);
+  --ol-color-primary-100: rgb(40 40 40);
+  --ol-color-primary-200: rgb(80 80 80);
+  --ol-color-primary-300: rgb(120 120 120);
+  --ol-color-primary-400: rgb(160 160 160);
+  --ol-color-primary-500: rgb(200 200 200);
+  --ol-color-primary-600: rgb(230 230 230);
+  --ol-color-primary-700: rgb(240 240 240);
+  --ol-color-primary-800: rgb(255 255 255);
+  --ol-color-primary-900: rgb(255 255 255);
+  --ol-color-primary-950: rgb(255 255 255);
+}
+
+/**
+ * Installation Page Styles
+ * -------------
+ * These styles are applied to the installation page of the Cupra Events app.
+ */
+.oip__page__content .oip__page__installation {
+  width: 100%;
+}
+
+/* ========================================================================
+   CORE ONLIVE UI COMPONENTS
+   ======================================================================== */
+
+/**
+ * Button Component Styling
+ * ------------------------
+ * Custom styling for ol-button elements including base styles,
+ * label padding, and spinner appearance
+ */
+ol-button::part(base) {
+  border-radius: 0;
+  color: var(--ol-color-neutral-0);
+  background-color: var(--ol-color-neutral-1000);
+}
+ol-button[variant="default"]::part(base) {
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-900);
+  color: var(--ol-color-neutral-900);
+}
+ol-button::part(label) {
+  padding: var(--ol-spacing-2x-small) var(--ol-spacing-medium);
+  font-weight: var(--ol-font-weight-bold);
+  font-family: var(--ol-font-sans);
+}
+ol-button::part(spinner) {
+  font-size: 1.5em;
+}
+ol-button:hover:not([disabled])::part(base) {
+  opacity: 0.8;
+}
+
+/**
+ * Input Component Styling
+ * -----------------------
+ * Styling for ol-input elements with transparent borders,
+ * bottom border emphasis, and custom border radius settings
+ */
+ol-input {
+  --ol-input-border-radius-small: 0;
+  --ol-input-border-radius-medium: 0;
+  --ol-input-border-radius-large: 0;
+}
+ol-input::part(base) {
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-neutral-900);
+  background-color: transparent;
+  box-shadow: none;
+}
+
+ol-textarea::part(base) {
+  border-radius: 0;
+}
+ol-carousel::part(pagination) {
+  gap: var(--ol-spacing-x-small);
+}
+ol-carousel::part(pagination-item) {
+  border-radius: 0;
+  height: 2px;
+  width: 20px;
+}
+
+/* Flow App */
+.ofl__widget {
+  max-width: 1200px;
+  margin: var(--ol-spacing-2x-large) auto;
+}
+
+/**
+ * Radio Button Component Styling
+ * ------------------------------
+ * Styling for radio button groups including layout,
+ * content arrangement, and interaction states
+ */
+.ofl__radio-button__button + .ofl__radio-button__button::part(base) {
+  margin-left: var(--ol-spacing-x-small);
+}
+.ofl__radio-button__button::part(button) {
+  border-radius: var(--ol-border-radius-pill);
+}
+
+/* Flow Package */
+.ofl__flow__description {
+  margin-bottom: var(--ol-spacing-2x-large);
+}
+.ofl__label a {
+  font-weight: var(--ol-font-weight-bold);
+  color: var(--ol-color-primary-900);
+}
+.ofl__map__distance-range::part(input) {
+  --thumb-border-radius: 0;
+}
+.ofl__calendar__calendar-skeleton {
+  --border-radius: 0;
+}
+.ofl__calendar__time-item__content {
+  border-radius: 0;
+}
+.ofl__grid__item {
+  background-color: var(--ol-color-primary-700);
+}
+.ofl__actions {
+  max-width: 400px;
+  margin: 0 auto;
+}
+.ofl__form {
+  gap: var(--ol-spacing-large);
+}
+.ofl__form__field {
+  color: var(--ol-color-neutral-1000);
+  font-family: var(--ol-font-sans);
+}
+.ofl__input {
+  --ol-input-spacing-medium: 0;
+  --ol-input-floating-label-final-position-medium: 0, -14px;
+  --ol-input-color: var(--ol-color-neutral-800);
+  --ol-input-color-hover: var(--ol-color-neutral-800);
+  --ol-input-label-color: var(--ol-color-neutral-700);
+  --ol-input-floating-label-color: var(--ol-color-neutral-700);
+  --ol-input-placeholder-color: var(--ol-color-neutral-700);
+}
+.ofl__input--error::part(base),
+.ofl__input--error:focus::part(base) {
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-danger-600);
+}
+.ofl__radio-button__group {
+  overflow-x: auto;
+}
+
+/* Custom Step Styles */
+.ofl__flow--step-alreadyBooked .ofl__flow__error {
+  display: none;
+}
+
+/* Custom steps styling */
+.ofl__flow--step-contact,
+.ofl__flow--step-codeVerification {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.ofl__flow--step-actionSelection,
+.ofl__flow--step-datetimeSelection,
+.ofl__flow--step-appointmentCancellation,
+.ofl__flow--step-cancellationSuccess,
+.ofl__flow--step-cancellationFailed,
+.ofl__flow--step-rescheduleSuccess,
+.ofl__flow--step-rescheduleFailed {
+  width: calc(50vw - 108px);
+  padding: 20px 50px;
+  overflow: auto;
+  max-height: calc(100vh - 40px);
+  text-align: center;
+  margin: 0 auto;
+}
+
+.ofl__flow--step-contact {
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 1200px;
+  column-gap: var(--ol-spacing-x-large);
+}
+.ofl__flow--step-contact .ofl__flow__description,
+.ofl__flow--step-contact .ofl__flow__form-container {
+  width: calc(50% - var(--ol-spacing-x-large) / 2);
+  margin: 0;
+}
+.ofl__flow--step-contact .ofl__flow__description img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ofl__flow__actions--bottom {
+  margin-top: var(--ol-spacing-2x-large);
+}
+
+/* Custom Template Styles */
+
+/* Card Variant 1 */
+[card-design="variant-1"].ofl__grid__item {
+  position: relative;
+  height: 100%;
+  aspect-ratio: 2 / 3;
+}
+[card-design="variant-1"] .ofl__grid__item-image {
+  height: 100%;
+  object-fit: cover;
+}
+[card-design="variant-1"] .ofl__grid__item-content {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background:
+    linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 70%, rgb(0, 0, 0) 100%),
+    radial-gradient(circle at 10% 100%, rgb(35 46 105 / 90%) 0%, transparent 50%),
+    radial-gradient(circle at 30% 100%, rgb(73 24 114 / 70%) 0%, transparent 50%),
+    radial-gradient(circle at 70% 100%, rgb(141 31 31 / 80%) 0%, transparent 50%);
+  height: calc(100% - 2 * var(--ol-spacing-x-large));
+  width: calc(100% - 2 * var(--ol-spacing-x-large));
+  padding: var(--ol-spacing-x-large);
+  top: 0;
+  z-index: 1;
+}
+[card-design="variant-1"] .olcs__event-overline {
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: var(--ol-font-weight-bold);
+  color: var(--ol-color-neutral-0);
+}
+[card-design="variant-1"] .olcs__event-title {
+  font-size: 32px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin: var(--ol-spacing-2x-small) 0 0;
+  font-family: var(--cupra-font-family-book);
+  font-weight: 100;
+  color: var(--ol-color-neutral-0);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3em;
+  height: 2.6em;
+}
+[card-design="variant-1"] .olcs__event-overline span,
+[card-design="variant-1"] .olcs__event-overline time {
+  text-transform: none;
+  font-weight: var(--ol-font-weight-normal);
+  font-family: var(--ol-font-sans);
+}
+[card-design="variant-1"] .olcs__event-overline span {
+  font-size: 1.75em;
+  font-family: var(--cupra-font-family-light);
+  line-height: var(--ol-line-height-denser);
+  font-weight: var(--ol-font-weight-light);
+}
+[card-design="variant-1"] .olcs__event-details {
+  padding: 0;
+  margin: var(--ol-spacing-2x-small) 0;
+  list-style-type: none;
+  color: var(--ol-color-neutral-0);
+}
+[card-design="variant-1"] .olcs__event-details li {
+  vertical-align: middle;
+  display: flex;
+  align-items: center;
+  gap: var(--ol-spacing-x-small);
+}
+[card-design="variant-1"] .olcs__event-details li + li {
+  margin-top: var(--ol-spacing-2x-small);
+}
+[card-design="variant-1"] .olcs__event-description {
+  font-size: var(--ol-font-size-medium);
+  font-family: var(--ol-font-sans);
+  color: var(--ol-color-neutral-200);
+  margin: var(--ol-spacing-x-small) 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5em;
+  height: 9em;
+}
+[card-design="variant-1"] .olcs__event-description p {
+  margin: 0;
+}
+[card-design="variant-1"] .olcs__subtitle {
+  font-size: var(--ol-font-size-medium);
+  margin-block: 0;
+}
+[card-design="variant-1"] .olcs__event-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ol-spacing-x-small);
+  font-size: var(--ol-font-size-medium);
+  margin: var(--ol-spacing-large) 0 0;
+  justify-content: flex-end;
+  font-family: var(--cupra-font-family-book);
+  color: var(--ol-color-neutral-300);
+  transition: color 0.3s ease;
+}
+[card-design="variant-1"]:hover .olcs__event-actions {
+  color: var(--ol-color-neutral-0);
+}
+[card-design="variant-1"] .ofl__grid__item:hover .olcs__event-actions {
+  color: var(--ol-color-neutral-0);
+}
+
+/* Card Variant 2 */
+.ofl__actions--grid-field {
+  max-width: 100%;
+}
+.ofl__actions--grid-field .ofl__actions__button::part(base) {
+  border: 1px solid var(--ol-color-neutral-0);
+}
+[card-design="variant-2"].ofl__grid__item {
+  display: flex;
+  flex-direction: column;
+}
+[card-design="variant-2"] .ofl__grid__item-image {
+  height: 300px;
+  object-fit: cover;
+}
+[card-design="variant-2"] .ofl__grid__item-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+}
+[card-design="variant-2"] .ofl__grid__item-content {
+  padding: var(--ol-spacing-large);
+  width: calc(100% - 2 * var(--ol-spacing-large));
+}
+[card-design="variant-2"] .ofl__grid__actions {
+  margin: auto var(--ol-spacing-large) var(--ol-spacing-large);
+}
+[card-design="variant-2"] .olcs__event-overline {
+  text-transform: uppercase;
+  font-size: var(--ol-font-size-medium);
+  font-weight: var(--ol-font-weight-bold);
+  color: var(--ol-color-neutral-300);
+}
+[card-design="variant-2"] .olcs__event-title {
+  font-size: var(--ol-font-size-x-large);
+  text-transform: uppercase;
+  line-height: var(--ol-line-height-dense);
+  letter-spacing: 2px;
+  margin: var(--ol-spacing-2x-small) 0;
+  font-family: var(--cupra-font-family-medium);
+  font-weight: 800;
+  color: var(--ol-color-neutral-0);
+}
+[card-design="variant-2"] .olcs__event-overline span,
+[card-design="variant-2"] .olcs__event-overline time {
+  text-transform: none;
+  font-weight: var(--ol-font-weight-normal);
+  font-family: var(--ol-font-sans);
+}
+[card-design="variant-2"] .olcs__event-overline span {
+  font-size: 1.75em;
+  font-family: var(--cupra-font-family-light);
+  line-height: var(--ol-line-height-denser);
+  font-weight: var(--ol-font-weight-light);
+}
+[card-design="variant-2"] .olcs__event-description {
+  font-size: var(--ol-font-size-medium);
+  line-height: var(--ol-line-height-dense);
+  font-family: var(--ol-font-sans);
+  color: var(--ol-color-neutral-200);
+  margin: var(--ol-spacing-medium) 0;
+}
+[card-design="variant-2"] .olcs__subtitle {
+  font-size: var(--ol-font-size-medium);
+  margin-block: 0;
+}
+
+.olcs__mega_icon {
+  font-size: var(--ol-font-size-4x-large);
+  color: var(--ol-color-neutral-700);
+  margin: var(--ol-spacing-medium);
+}
+
+.olcs__event-page .olcs__event-overline {
+  font-family: var(--cupra-font-family-light);
+  font-weight: var(--ol-font-weight-light);
+  line-height: var(--ol-line-height-denser);
+  font-size: var(--ol-font-size-large);
+}
+
+.olcs__event-page .olcs__event-overline time {
+  font-size: var(--ol-font-size-medium);
+}
+
+.olcs__event-page .olcs__event-title {
+  font-family: var(--cupra-font-family-light);
+  font-weight: var(--ol-font-weight-light);
+  margin: var(--ol-spacing-2x-small) 0;
+  font-size: 32px;
+  line-height: 1.5;
+}
+
+/**
+ * Mobile Responsive Adjustments
+ * -----------------------------
+ * Calendar component adjustments for mobile devices (768px and below)
+ */
+@media screen and (max-width: 768px) {
+  .ofl__carousel::part(base) {
+    gap: 0;
+  }
+  .ofl__carousel::part(navigation) {
+    display: none;
+  }
+  .ofl__carousel::part(pagination) {
+    margin-top: var(--ol-spacing-small);
+  }
+  .ofl__carousel .ofl__carousel__item {
+    height: 100%;
+  }
+
+  /* Custom steps styling */
+  .ofl__flow--step-actionSelection,
+  .ofl__flow--step-datetimeSelection,
+  .ofl__flow--step-appointmentCancellation,
+  .ofl__flow--step-cancellationSuccess,
+  .ofl__flow--step-cancellationFailed,
+  .ofl__flow--step-rescheduleSuccess,
+  .ofl__flow--step-rescheduleFailed {
+    position: fixed;
+    inset: 0;
+    background: rgb(255 255 255 / 90%);
+    width: calc(100% - 100px);
+    padding: 20px 50px;
+    overflow: auto;
+  }
+
+  .ofl__flow--step-contact {
+    row-gap: var(--ol-spacing-large);
+  }
+  .ofl__flow--step-contact .ofl__flow__description,
+  .ofl__flow--step-contact .ofl__flow__form-container {
+    width: 100%;
+  }
+  .ofl__flow--step-contact .ofl__flow__description img {
+    max-height: 240px;
+  }
+  .ofl__flow--step-contact .ofl__flow__actions--bottom {
+    margin-top: 0;
+  }
+
+  /* Custom steps styling */
+  [card-design="variant-1"] .olcs__event-overline {
+    font-size: 14px;
+  }
+  [card-design="variant-1"] .olcs__event-title {
+    font-size: 28px;
+  }
+  [card-design="variant-1"] .olcs__event-description {
+    font-size: var(--ol-font-size-medium);
+  }
+}
+
+/**
+ * Desktop Responsive Adjustments
+ * ------------------------------
+ * Styles for larger screens (769px and above)
+ */
+@media screen and (min-width: 769px) {
+  .ofl__grid > .ofl__grid__item[highlighted]:nth-child(1) {
+    grid-column: 1 / -1;
+  }
+
+  /* Custom Template Styles */
+
+  /* Card Variant 1 */
+  .ofl__grid > .ofl__grid__item[highlighted][card-design="variant-1"]:nth-child(1) {
+    aspect-ratio: auto;
+    height: 400px;
+    width: 100%;
+  }
+  .ofl__grid
+    > .ofl__grid__item[highlighted][card-design="variant-1"]:nth-child(1)
+    .olcs__event-actions {
+    font-size: var(--ol-font-size-large);
+  }
+
+  /* Card Variant 2 */
+  .ofl__grid > .ofl__grid__item[highlighted][card-design="variant-2"]:nth-child(1) {
+    flex-direction: row;
+  }
+  .ofl__grid
+    > .ofl__grid__item[highlighted][card-design="variant-2"]:nth-child(1)
+    .ofl__grid__item-image {
+    height: auto;
+    width: 50%;
+    max-height: 500px;
+  }
+  .ofl__grid
+    > .ofl__grid__item[highlighted][card-design="variant-2"]:nth-child(1)
+    .olcs__event-title {
+    font-size: var(--ol-font-size-2x-large);
+  }
+  .ofl__grid
+    > .ofl__grid__item[highlighted][card-design="variant-2"]:nth-child(1)
+    .ofl__grid__item-content {
+    padding: var(--ol-spacing-x-large);
+    width: calc(100% - 2 * var(--ol-spacing-x-large));
+  }
+  .ofl__grid
+    > .ofl__grid__item[highlighted][card-design="variant-2"]:nth-child(1)
+    .ofl__grid__actions {
+    margin: auto var(--ol-spacing-x-large) var(--ol-spacing-x-large);
+  }
+}
+`;0&&(module.exports={styles});

package/themes/custom/cupra-events.theme.d.cts

@@ -0,0 +1,3 @@
+/*! @onlive.ai/common-121 v0.2.184 | © 2026 Onlive.ai */
+import 'lit';
+export { s as styles } from '../../cupra-events.theme-D2xJeafa.cjs';

package/themes/custom/cupra-events.theme.d.ts

@@ -0,0 +1,3 @@
+/*! @onlive.ai/common-121 v0.2.184 | © 2026 Onlive.ai */
+import 'lit';
+export { s as styles } from '../../cupra-events.theme-D2xJeafa.js';