@onlive.ai/common-121 0.2.187 → 0.2.190

package/themes/custom/audi.theme.css

@@ -0,0 +1,774 @@
+/**
+ * Audi Theme for Onlive Flow Components
+ * ====================================
+ *
+ * This file contains custom CSS styling for the Audi brand implementation
+ * of the Onlive Flow component library. The theme provides consistent
+ * branding elements following Audi's design system guidelines.
+ */
+
+/**
+ * Font Face Definitions
+ * ----------------------
+ * Custom font definitions for Audi Typeface
+ */
+@font-face {
+  font-family: "AudiType";
+  src: url("https://assets.one.audi/assets/fonts/AudiTypeVF.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: normal;
+  font-stretch: 100% 130%;
+}
+
+/* ========================================================================
+   ROOT VARIABLES & THEME DEFINITIONS
+   ======================================================================== */
+
+/**
+ * Light Theme Color Palette & Variables
+ * -------------------------------------
+ * Primary theme variables including Audi brand colors,
+ * Onlive UI color palette, typography, and component-specific variables
+ */
+:root,
+:host,
+.ol-theme-light {
+  /* Audi UI Palette */
+  --audi-active-color: #f50538;
+  --audi-error-color: #eb0d3f;
+
+  /* Onlive UI Palette */
+  --ol-color-primary-50: rgb(240 240 240);
+  --ol-color-primary-100: rgb(220 220 220);
+  --ol-color-primary-200: rgb(150 150 150);
+  --ol-color-primary-300: rgb(100 100 100);
+  --ol-color-primary-400: rgb(80 80 80);
+  --ol-color-primary-500: rgb(60 60 60);
+  --ol-color-primary-600: rgb(20 20 20);
+  --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);
+
+  --ol-color-gray-50: rgb(254 254 254);
+  --ol-color-gray-100: rgb(249 249 249);
+  --ol-color-gray-200: rgb(239 239 239);
+  --ol-color-gray-300: rgb(214 214 214);
+  --ol-color-gray-400: rgb(179 179 179);
+  --ol-color-gray-500: rgb(141 141 141);
+  --ol-color-gray-600: rgb(102 102 102);
+  --ol-color-gray-700: rgb(62 62 62);
+  --ol-color-gray-800: rgb(20 20 20);
+  --ol-color-gray-900: rgb(5 5 5);
+  --ol-color-gray-950: rgb(0 0 0);
+
+  --ol-color-danger-600: var(--audi-error-color);
+
+  /* Onlive UI Font and Vars */
+  font-family: AudiType, sans-serif;
+  --ol-font-sans: AudiType, sans-serif;
+  --ol-input-required-content: "";
+  --ol-calendar-month-font-family: AudiType, sans-serif;
+  --ol-calendar-month-font-stretch: expanded;
+  --ol-calendar-day-border-radius: 0;
+  --ol-calendar-day-padding: 12px 0;
+  --ol-calendar-day-margin: 2px;
+  --ol-calendar-day-border: 1px solid var(--ol-color-neutral-400);
+  --ol-calendar-day-hover-border: 1px solid var(--ol-color-primary-900);
+  --ol-calendar-day-after-hover-border: 1px solid var(--ol-color-primary-900);
+  --ol-calendar-day-hover-background-color: transparent;
+  --ol-calendar-inactive-color: var(--ol-color-neutral-0);
+  --ol-calendar-inactive-background-color: var(--ol-color-neutral-400);
+  --ol-calendar-header-margin: 0 auto var(--ol-spacing-large) auto;
+  --ol-calendar-week-color: var(--ol-color-neutral-900);
+  --ol-input-floating-label-background-color: transparent;
+  --ol-input-floating-label-font-size-medium: var(--ol-font-size-x-small);
+  --ol-input-label-font-size-medium: var(--ol-font-size-small);
+  --ol-input-label-color: var(--ol-color-neutral-800);
+}
+
+/* ========================================================================
+   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;
+}
+ol-button::part(label) {
+  padding: var(--ol-spacing-2x-small) var(--ol-spacing-medium);
+}
+ol-button::part(spinner) {
+  font-size: 1.5em;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Textarea Component Styling
+ * --------------------------
+ * Custom styling for ol-textarea elements including
+ * border radius, bottom border emphasis, and padding adjustments
+ */
+ol-textarea::part(base) {
+  border-radius: 0;
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-neutral-900);
+  box-shadow: none;
+}
+
+ol-textarea::part(textarea) {
+  padding-inline: 0px;
+}
+
+/**
+ * Select Component Styling
+ * --------------------------
+ * Custom styling for ol-select elements including
+ * combobox appearance and border settings
+ */
+ol-select::part(combobox) {
+  border: none;
+  border-bottom: 1px solid;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+ol-select::part(listbox) {
+  border-radius: 0;
+}
+ol-select::part(expand-icon) {
+  display: none;
+}
+
+/**
+ * Carousel Component Styling
+ * --------------------------
+ * Custom styling for ol-carousel pagination elements
+ */
+ol-carousel::part(pagination) {
+  gap: var(--ol-spacing-x-small);
+}
+ol-carousel::part(pagination-item) {
+  border-radius: 0;
+  height: var(--ol-spacing-2x-small);
+  width: var(--ol-spacing-medium);
+}
+
+/**
+ * Checkbox Component Styling
+ * --------------------------
+ * Custom styling for ol-checkbox elements including
+ * checked icon appearance and background color
+ */
+ol-checkbox::part(control) {
+  border-color: var(--ol-color-neutral-700);
+}
+ol-checkbox::part(checked-icon) {
+  color: var(--ol-color-neutral-1000);
+  background-color: var(--ol-color-neutral-0);
+  width: 16px;
+  height: 16px;
+}
+
+/**
+ * Tooltip Component Styling
+ * -------------------------
+ * Custom styling for ol-tooltip elements including
+ * background color, padding, and font size adjustments
+ */
+ol-tooltip::part(body) {
+  background-color: var(--ol-color-neutral-950);
+  padding: var(--ol-spacing-medium);
+  font-size: var(--ol-font-size-x-small);
+}
+
+/**
+ * Details Component Styling
+ * -------------------------
+ * Custom styling for ol-details elements including
+ * summary icon rotation and open state adjustments
+ */
+ol-details::part(summary-icon) {
+  rotate: 90deg;
+}
+ol-details[open]::part(summary-icon) {
+  rotate: -90deg;
+}
+
+/**
+ * General Label Styling
+ * ---------------------
+ * Typography styling for general label elements
+ */
+label {
+  font-stretch: semi-expanded;
+}
+
+/* ========================================================================
+   ONLIVE FLOW PACKAGE COMPONENTS
+   ======================================================================== */
+
+/**
+ * Widget Base Styling
+ * -------------------
+ * Base container styling for flow widgets
+ */
+.ofl__widget {
+  max-width: 528px;
+}
+
+/**
+ * Flow Title Styling
+ * ----------------------
+ * Typography styling for flow titles including font size and stretch
+ */
+.ofl__flow__title {
+  font-size: 40px;
+  font-stretch: expanded;
+  font-weight: var(--ol-font-weight-normal);
+  line-height: var(--ol-line-height-dense);
+  margin: 0 0 var(--ol-spacing-x-large);
+}
+
+.ofl__flow__description {
+  margin-bottom: var(--ol-spacing-2x-large);
+}
+
+/**
+ * Flow Stages & Actions
+ * ---------------------
+ * Styling for flow navigation stages and action containers
+ */
+.ofl__flow__stages {
+  font-size: var(--ol-font-size-small);
+  font-stretch: expanded;
+}
+.ofl__flow__stages.ofl__flow__stages--top {
+  margin-bottom: var(--ol-spacing-x-large);
+}
+.ofl__stages__step {
+  font-weight: var(--ol-font-weight-normal);
+}
+.ofl__flow__actions--top {
+  margin-bottom: var(--ol-spacing-2x-large);
+}
+.ofl__flow__actions--bottom {
+  margin-top: var(--ol-spacing-2x-large);
+}
+
+.ofl__flow--step-appointmentCancellation,
+.ofl__flow--step-cancellationFailed,
+.ofl__flow--step-cancellationThankYouPage,
+.ofl__flow--step-updateDatetime,
+.ofl__flow--step-updateCustomerDetails {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+/**
+ * Flow Label Styling
+ * ------------------
+ * Typography styling for flow labels including link colors
+ */
+.ofl__label a {
+  color: var(--ol-color-neutral-800);
+}
+
+/**
+ * Action Buttons
+ * --------------
+ * Styling for flow action buttons including variants and hover states
+ */
+.ofl__actions__button {
+  min-width: calc(var(--ol-spacing-medium) * 9);
+  justify-self: start;
+}
+.ofl__actions__button::part(label) {
+  font-weight: var(--ol-font-weight-normal);
+}
+.ofl__actions__button[variant="default"]::part(base) {
+  color: var(--ol-color-neutral-1000);
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-900);
+}
+.ofl__actions__button[variant="default"]:hover::part(base) {
+  color: var(--ol-color-neutral-600);
+  border-color: var(--ol-color-neutral-500);
+}
+.ofl__actions > :last-child {
+  justify-self: end;
+}
+.ofl__actions > :last-child:nth-child(odd) {
+  grid-column-start: -1;
+}
+
+/**
+ * Error Component Styling
+ * -----------------------
+ * Custom styling for error components including icon, message,
+ * and link interactions
+ */
+.ofl__error {
+  margin: var(--ol-spacing-x-large) 0 0;
+  align-items: flex-start;
+}
+.ofl__error-content {
+  align-items: flex-start;
+}
+.ofl__error-message {
+  flex: 1;
+  line-height: 1.6;
+}
+.ofl__error-message h3 {
+  font-size: var(--ol-font-size-2x-large);
+  font-weight: var(--ol-font-weight-light);
+  line-height: var(--ol-line-height-dense);
+  margin-bottom: var(--ol-spacing-large);
+  font-stretch: expanded;
+}
+.ofl__error-message p {
+  line-height: 1.6;
+  margin-bottom: var(--ol-spacing-large);
+}
+.ofl__error__actions {
+  width: 100%;
+}
+.ofl__actions--error {
+  display: flex;
+}
+.ofl__actions--error .ofl__actions__button {
+  flex: 1;
+}
+.ofl__error--step-validation .ofl__error-icon,
+.ofl__error--step-loading .ofl__error-icon,
+.ofl__error--field-loading .ofl__error-icon {
+  width: 3em;
+  height: 3em;
+}
+.ofl__error--field-loading {
+  align-items: center;
+  margin: var(--ol-spacing-x-large) 0 var(--ol-spacing-2x-large);
+}
+.ofl__error--field-loading .ofl__error-content {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/**
+ * Calendar Component Styling
+ * --------------------------
+ * Comprehensive styling for calendar elements including
+ * time items, labels, and grid layouts
+ */
+.ofl__calendar__calendar,
+.ofl__calendar__calendar::part(base) {
+  width: 100%;
+}
+.ofl__calendar__calendar::part(header-content) {
+  padding: 0 var(--ol-spacing-x-large);
+}
+.ofl__calendar__calendar-skeleton,
+.ofl__calendar__time-item__content,
+.ofl__map__distance-range::part(input) {
+  border-radius: 0;
+  --border-radius: 0;
+  --thumb-border-radius: 0;
+}
+.ofl__calendar__label,
+.ofl__calendar__time-label {
+  font-stretch: expanded;
+  font-weight: var(--ol-font-weight-bold);
+}
+.ofl__calendar__time-label {
+  font-size: var(--ol-font-size-large);
+  margin: var(--ol-spacing-2x-large) 0 var(--ol-spacing-small);
+}
+.ofl__calendar__time-item {
+  width: 100%;
+}
+.ofl__calendar__time-list--list {
+  max-width: 100%;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button__label) {
+  font-weight: var(--ol-font-weight-normal);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button),
+.ofl__calendar__time-item__content,
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button)::after {
+  border-radius: 0;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  border-color: var(--ol-color-neutral-400);
+  min-height: 40px;
+}
+.ofl__calendar__time-list--list::part(button-group) {
+  width: 100%;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item:hover::part(button) {
+  border-color: var(--ol-color-primary-900);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item[checked]::part(button) {
+  border-color: transparent;
+}
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button)::after {
+  border: 1px solid var(--ol-color-primary-900);
+}
+.ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow: row;
+  gap: var(--ol-spacing-2x-small);
+  justify-content: start;
+}
+
+/**
+ * Map Component Styling
+ * ---------------------
+ * Styling for map components including search forms, options,
+ * location buttons, and input elements
+ */
+.ofl__map__option-item[no-service]::part(base) {
+  background-color: var(--ol-color-neutral-200);
+}
+
+.ofl__map .ofl__map__search-form,
+.ofl__map.ofl__map--small .ofl__map__search-form {
+  margin-bottom: var(--ol-spacing-x-large);
+}
+.ofl__map .ofl__map__search-form > :not(:first-child),
+.ofl__map.ofl__map--small .ofl__map__search-form > :not(:first-child) {
+  margin-top: var(--ol-spacing-x-large);
+}
+.ofl__map__search-button-outside {
+  align-self: flex-end;
+  margin-top: var(--ol-spacing-small) 12px;
+  width: calc(var(--ol-spacing-medium) * 9);
+}
+.ofl__map__location-button {
+  font-size: var(--ol-font-size-large);
+  padding-inline-start: var(--ol-spacing-x-small);
+}
+.ofl__map__search-prefix-icon {
+  font-size: var(--ol-font-size-x-large);
+  padding-inline-end: var(--ol-spacing-medium);
+}
+.ofl__map__search-input,
+.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-message {
+  gap: var(--ol-spacing-x-small);
+  line-height: var(--ol-line-height-loose);
+  font-size: var(--ol-font-size-small);
+}
+.ofl__map__options-title {
+  font-stretch: ultra-expanded;
+  font-size: var(--ol-font-size-medium);
+}
+.ofl__map__option-item__description,
+.ofl__map__option-item__distance {
+  color: var(--ol-color-primary-700);
+}
+.ofl__map__option-item__distance {
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+
+/**
+ * Radio Button Component Styling
+ * ------------------------------
+ * Styling for radio button groups including layout,
+ * content arrangement, and interaction states
+ */
+.ofl__radio-button__group {
+  text-align: center;
+}
+.ofl__radio-button__button + .ofl__radio-button__button::part(base) {
+  margin-left: var(--ol-spacing-small);
+}
+.ofl__radio-button__button::part(button) {
+  border-radius: 0;
+}
+.ofl__radio-button__button__content {
+  flex-direction: column;
+  padding: var(--ol-spacing-large);
+}
+.ofl__radio-button__label {
+  line-height: 1;
+}
+
+/**
+ * Form Component Styling
+ * ----------------------
+ * Styling for form fields, input states, and validation indicators
+ */
+.ofl__form__field + .ofl__form__field[component="input"] {
+  margin-top: var(--ol-spacing-x-large);
+}
+.ofl__input--error::part(base),
+.ofl__textarea--error::part(base),
+.ofl__input--error:focus::part(base),
+.ofl__textarea--error:focus::part(base) {
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-danger-600);
+}
+
+/**
+ * Checkbox Component Styling
+ * --------------------------
+ * Styling for checkbox lists and horizontal layouts
+ */
+.ofl__checkbox__list.ofl__checkbox__list--horizontal .ofl__checkbox__checkbox
+  + .ofl__checkbox__checkbox {
+  margin-left: var(--ol-spacing-x-large);
+}
+
+/**
+ * Rating Component Styling
+ * ------------------------
+ * Custom styling for rating components including symbol size,
+ * spacing, and hover effects
+ */
+.ofl__rating {
+  --symbol-color: var(--ol-color-neutral-900);
+  --symbol-size: 2em;
+  --symbol-spacing: 0 var(--ol-spacing-medium) 0 0;
+  margin-bottom: var(--ol-spacing-large);
+}
+
+/* ========================================================================
+   CUSTOM APPLICATION STYLES
+   ======================================================================== */
+
+/**
+ * Custom Label Components
+ * ----------------------
+ * Styling for custom label elements including descriptions
+ * and typography adjustments
+ */
+.olcs__label {
+  display: flex;
+  align-items: center;
+  font-stretch: expanded;
+  font-size: var(--ol-font-size-x-large);
+  margin: 0;
+}
+.olcs__label--spacing-top-x-large {
+  margin-top: var(--ol-spacing-x-large);
+}
+.olcs__label--spacing-bottom-x-large {
+  margin-bottom: var(--ol-spacing-x-large);
+}
+.olcs__label--spacing-top-small {
+  margin-top: var(--ol-spacing-small);
+}
+.olcs__label-description {
+  font-size: var(--ol-font-size-medium);
+  margin-block: 0;
+}
+.olcs__label-description + .olcs__label-description {
+  margin-top: var(--ol-spacing-medium);
+}
+.olcs__label-description a {
+  color: var(--ol-color-neutral-800);
+}
+.olcs__note {
+  font-size: var(--ol-font-size-x-small);
+  color: var(--ol-color-neutral-600);
+  margin: 0;
+}
+.olcs__help-icon {
+  cursor: help;
+  margin-left: var(--ol-spacing-small);
+}
+.olcs__grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(2, auto);
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--ol-spacing-x-large);
+  margin: var(--ol-spacing-x-large) 0;
+}
+.olcs__row {
+  display: flex;
+  align-items: center;
+}
+.olcs__row > *:not(:first-child) {
+  margin-left: var(--ol-spacing-large);
+}
+.olcs__row img {
+  width: 32px;
+  height: 32px;
+}
+.olcs__row__text h4,
+.olcs__row__text p {
+  margin: var(--ol-spacing-2x-small) 0;
+}
+.olcs__row__text h4 {
+  font-size: var(--ol-font-size-small);
+  font-weight: var(--ol-font-weight-bold);
+}
+
+/* ========================================================================
+   APPLICATIONS PAGE STYLES
+   ======================================================================== */
+
+.oip__page__content .oip__page__installation {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: auto;
+}
+
+/* ========================================================================
+   RESPONSIVE DESIGN & MEDIA QUERIES
+   ======================================================================== */
+
+/**
+ * Mobile Responsive Adjustments
+ * -----------------------------
+ * Calendar component adjustments for mobile devices (768px and below)
+ */
+@media only screen and (max-width: 768px) {
+  /* ========================================================================
+   ONLIVE FLOW PACKAGE COMPONENTS
+   ======================================================================== */
+
+  /**
+   * Flow Title Styling
+   * ----------------------
+   * Typography styling for flow titles including font size and stretch
+   */
+  .ofl__flow__title {
+    font-size: 28px;
+  }
+
+  /**
+   * Custom Label Components
+   * ----------------------
+   * Styling for custom label elements including descriptions
+   * and typography adjustments
+   */
+  .olcs__label {
+    font-size: 18px;
+  }
+
+  /**
+   * Action Buttons
+   * --------------
+   * Styling for flow action buttons including variants and hover states
+   */
+  .ofl__actions {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .ofl__actions > *:not(:first-child) {
+    margin-bottom: var(--ol-spacing-x-small);
+  }
+  .ofl__actions--top .ofl__actions__button::part(base) {
+    border: none;
+    padding: 0;
+  }
+  .ofl__actions--top .ofl__actions__button::part(label) {
+    padding: var(--ol-spacing-2x-small);
+  }
+  .ofl__actions--top .ofl__actions__button::part(prefix) {
+    font-size: 1.75em;
+    margin-left: calc(var(--ol-spacing-x-small) * -1);
+  }
+  .ofl__actions--top .ofl__actions__button {
+    width: max-content;
+  }
+  .ofl__actions--bottom .ofl__actions__button {
+    width: 100%;
+  }
+  .ofl__actions--bottom > :last-child:nth-child(odd) {
+    grid-column-start: 1;
+  }
+
+  /**
+   * Error Component Styling
+   * -----------------------
+   * Custom styling for error components including icon, message,
+   * and link interactions
+   */
+  .ofl__error-content {
+    flex-direction: column;
+  }
+  .ofl__error--step-validation .ofl__error-content,
+  .ofl__error--step-loading .ofl__error-content {
+    align-items: center;
+    text-align: center;
+  }
+  .ofl__actions--error {
+    flex-direction: column;
+  }
+  .ofl__error-message h3 {
+    font-size: var(--ol-font-size-x-large);
+  }
+
+  /**
+   * Map Component Styling
+   * ---------------------
+   * Styling for map components including search forms, options,
+   * location buttons, and input elements
+   */
+  .ofl__map__search-button-outside {
+    width: 100%;
+  }
+
+  .ofl__flow--step-appointmentCancellation,
+  .ofl__flow--step-cancellationFailed,
+  .ofl__flow--step-cancellationThankYouPage,
+  .ofl__flow--step-updateDatetime,
+  .ofl__flow--step-updateCustomerDetails {
+    padding-block: 0;
+  }
+
+  /* ========================================================================
+   CUSTOM APPLICATION STYLES
+   ======================================================================== */
+
+  .olcs__grid {
+    grid-auto-flow: row;
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  /* ========================================================================
+   APPLICATIONS PAGE STYLES
+   ======================================================================== */
+
+  .oip__page__content .oip__page__image_container .oip__page__image {
+    max-height: 240px;
+  }
+}