@qite/tide-booking-component 1.2.3 → 1.2.4

package/styles/booking-wizard-variables.scss

@@ -0,0 +1,530 @@
+:root {
+    // COLOR ASSIGNMENTS
+    --tide-booking-color-primary: #667eff;
+    --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #667eff 1.64%, #5b71e8 84.55%);
+    --tide-booking-color-primary-fade: #667dff44;
+    --tide-booking-color-primary-light: #667eff7b;
+    --tide-booking-color-primary-dark: #667effcc;
+    --tide-booking-color-secondary: #26b489;
+  
+    --tide-booking-color-star: #ecb911;
+    --tide-booking-invalid: #e74c3c;
+    --tide-booking-invalid-light: #EC7466;
+    --tide-booking-invalid-dark: #871D11;
+    --tide-booking-price-increase: #e81212;
+    --tide-booking-price-decrease: #19a364;
+  
+    --tide-booking-white: #ffffff;
+    --tide-booking-gray-light: #f5f5f5;
+    --tide-booking-gray-xlight: #fbfbfb;
+    --tide-booking-gray--medium-light: #efefef;
+    --tide-booking-gray-background-light: #e2e2e2;
+    --tide-booking-gray-border-light: #f3f3f3;
+    --tide-booking-gray-checkbox-bg: #bdbdbd;
+    --tide-booking-gray-medium: #cbcbcb;
+    --tide-booking-gray-dark: #666666;
+    --tide-booking-black: #0a0a0a;
+    --tide-booking-transparent: transparent;
+  
+    // BACKGROUNDS
+    --tide-booking-bg: #fafafa;
+  
+    // TYPOGRAPHY
+    --tide-booking-font-heading: "Outfit", serif;
+    --tide-booking-font-body: "Outfit", serif;
+    --tide-booking-font-handwritten: "Outfit", serif;
+  
+    --tide-booking-font-size-body: 16px;
+    --tide-booking-font-size-body-lg: 18px;
+    --tide-booking-line-height-body: 1;
+  
+    // GRID
+    --tide-booking-container-wide: 1690px;
+    --tide-booking-container-medium: 1200px;
+    --tide-booking-container-small: 900px;
+    --tide-booking-container-article: 65px;
+    --tide-booking-gutter: 15px;
+  
+    // MEDIA QUERIES
+    --tide-booking-screen-xs: 576px;
+    --tide-booking-screen-sm: 768px;
+    --tide-booking-screen-md: 992px;
+    --tide-booking-screen-lg: 1200px;
+    --tide-booking-screen-xl: 1650px;
+    --tide-booking-screen-xxl: 1920px;
+
+    //HEADINGS
+    --tide-booking-heading-color: var(--tide-booking-black);
+  
+    //h1
+    --tide-booking-h1: 32.5px;
+    --tide-booking-h1-sm: 48px;
+    --tide-booking-h1-xl: 48px;
+  
+    //h2
+    --tide-booking-h2: 24px;
+    --tide-booking-h2-sm: 30px;
+    --tide-booking-h2-xl: 30px;
+  
+    //h3
+    --tide-booking-h3: 22px;
+    --tide-booking-h3-sm: 25px;
+    --tide-booking-h3-xl: 25px;
+  
+    //h4
+    --tide-booking-h4: 18px;
+    --tide-booking-h4-sm: 23px;
+    --tide-booking-h4-xl: 23px;
+  
+    //h5
+    --tide-booking-h5: 17.5px;
+    --tide-booking-h5-xl: 20px;
+
+    //TOGGLE-SWITCH
+    --tide-booking-toggle-switch-background: var(--tide-booking-gray-medium);
+    --tide-booking-toggle-switch-border-radius: 5px;
+    --tide-booking-toggle-switch-after-color: var(--tide-booking-white);
+
+    //TOGGLE-SWITCH--TOGGLED
+    --tide-booking-toggle-switch-background-toggled: var(--tide-booking-color-primary);
+
+
+    //CHECKBOX
+    --tide-booking-checkbox-border: 1.5px solid var(--tide-booking-gray-checkbox-bg);
+    --tide-booking-checkbox-border-radius: 0px;
+    --tide-booking-checkbox-background: var(--tide-booking-white);
+    --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
+    --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
+    --tide-booking-checkbox-font-size: 16px;
+    --tide-booking-checkbox-font-weight: 400;
+
+        //CHECKBOX--INPUT--CHECKED
+        --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
+        --tide-booking-checkbox-input-checked-color-text: var(--tide-booking-color-primary);
+        --tide-booking-checkbox-input-checked-background: var(--tide-booking-color-primary);
+        --tide-booking-checkbox-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
+
+    //SLIDER
+    --tide-booking-slider-track-background: var(--tide-booking-color-primary);
+    --tide-booking-slider-range-background: var(--tide-booking-gray-medium);
+    --tide-booking-slider-thumb-border-color: var(--tide-booking-white);
+    --tide-booking-slider-thumb-background: var(--tide-booking-color-primary);
+
+    //BOOKING PRODUCT
+    --tide-booking-component-background: var(--tide-booking-bg);
+    --tide-booking-component-radius: 10px;
+    --tide-booking-component-border: 1.5px solid var(--tide-booking-color-primary-fade);
+  
+    //HEADER
+    --tide-booking-component-header-background: linear-gradient(204.08deg, #667eff 1.64%, #5b71e8 84.55%);
+    --tide-booking-component-header-color: var(--tide-booking-white);
+    --tide-booking-component-header-border-radius: 10px 10px 0px 0px;
+  
+    --tide-booking-component-header-star-rating: var(--tide-booking-color-star);
+    --tide-booking-component-header-title-color: var(--tide-booking-white);
+    --tide-booking-component-header-title-font: var(--tide-booking-font-heading);
+  
+    --tide-booking-component-header-icon-color: var(--tide-booking-white);
+  
+    //price header
+    --tide-booking-component-header-price-font-family: var(--tide-booking-font-body);
+    --tide-booking-component-header-price-font-size--mobile: 25px;
+    --tide-booking-component-header-price-font-size--desktop: 36px;
+    --tide-booking-component-header-price-font-weight: 400;
+    --tide-booking-component-header-price-color: var(--tide-booking-white);
+  
+    //small fontsize
+    --tide-booking-small-font-size--mobile: 13px;
+    --tide-booking-small-font-size--desktop: 15px;
+  
+    //CTA
+    --tide-booking-cta-height: 40px;
+    --tide-booking-cta-height-xs: 45px;
+    --tide-booking-cta-width: 100%;
+    --tide-booking-cta-width-xs: auto;
+    --tide-booking-cta-padding: 10px 20px;
+    --tide-booking-cta-color: var(--tide-booking-white);
+    --tide-booking-cta-background: linear-gradient(204.08deg, #14da9e 1.64%, #26b489 84.55%);
+    --tide-booking-cta-font-family: var(--tide-booking-font-body);
+    --tide-booking-cta-font-size: 16px;
+    --tide-booking-cta-font-size-xs: 18px;
+    --tide-booking-cta-font-weight: 400;
+    --tide-booking-cta-text-decoration: none;
+    --tide-booking-cta-border: none;
+    --tide-booking-cta-border-radius: 5px;
+  
+        //CTA__ICON
+        --tide-booking-cta-icon-color: var(--tide-booking-white);
+        --tide-booking-cta-icon-size: 16px;
+    
+        //CTA__HOVER
+        --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+        --tide-booking-cta-color-hover: var(--tide-booking-white);
+        --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
+        --tide-booking-cta-border-hover: none;
+        --tide-booking-cta-text-decoration-hover: none;
+    
+        //CTA__FOCUS
+        --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+        --tide-booking-cta-color-focus: var(--tide-booking-white);
+        --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
+        --tide-booking-cta-border-focus: none;
+        --tide-booking-cta-text-decoration-focus: none;
+  
+    //CTA--SECONDARY
+    --tide-booking-cta-height-secondary: 40px;
+    --tide-booking-cta-height-xs-secondary: 45px;
+    --tide-booking-cta-width-secondary: auto;
+    --tide-booking-cta-padding-secondary: 10px 20px;
+    --tide-booking-cta-margin-secondary: 0px 0 0 0;
+    --tide-booking-cta-background-secondary: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
+    --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
+    --tide-booking-cta-border-secondary: none;
+    --tide-booking-cta-border-radius-secondary: 5px;
+    --tide-booking-cta-text-decoration-secondary: none;
+    --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
+    --tide-booking-cta-font-size-secondary: 16px;
+    --tide-booking-cta-font-size-xs-secondary: 18px;
+    --tide-booking-cta-font-weight-secondary: 400;
+  
+        //CTA--SECONDARY__ICON
+        --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
+        --tide-booking-cta-icon-size-secondary: 16px;
+    
+        //CTA--SECONDARY__HOVER
+        --tide-booking-cta-background-secondary-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+        --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
+        --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
+        --tide-booking-cta-border-secondary-hover: none;
+        --tide-booking-cta-text-decoration-secondary-hover: none;
+    
+        //CTA--SECONDARY__FOCUS
+        --tide-booking-cta-background-secondary-focus: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+        --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
+        --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
+        --tide-booking-cta-border-secondary-focus: none;
+        --tide-booking-cta-text-decoration-secondary-focus: none;
+
+
+    //CTA--SELECT
+    --tide-booking-cta-background-select: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
+    --tide-booking-cta-color-select: var(--tide-booking-color-primary);
+    --tide-booking-cta-border-select: none;
+    --tide-booking-cta-border-radius-select: 5px;
+
+        //CTA--SELECT--HOVER/FOCUS/ACTIVE
+        --tide-booking-cta-background-select-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+        --tide-booking-cta-color-select-hover: var(--tide-booking-color-primary-dark);
+        --tide-booking-cta-border-select-hover: none;
+  
+    //CTA--SELECTED
+    --tide-booking-cta-background-selected: var(--tide-booking-color-primary-gradient);
+    --tide-booking-cta-color-selected: var(--tide-booking-white);
+    --tide-booking-cta-border-selected: none;
+    --tide-booking-cta-border-radius-selected: 5px;
+    --tide-booking-cta-color-selected-icon: var(--tide-booking-white);
+
+
+    //INCREMENT__DECREMENT
+    //INCREMENT__DECREMENT--btns
+    --tide-booking-decrement-increment-width: 30px;
+    --tide-booking-decrement-increment-height: 30px;
+    --tide-booking-decrement-increment-border-radius: 5px;
+    --tide-booking-decrement-increment-border: 0px solid var(--tide-booking-color-primary-fade);
+    --tide-booking-decrement-increment-background: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
+    --tide-booking-decrement-increment-color: var(--tide-booking-color-primary);
+  
+        //INCREMENT__DECREMENT--btns--icon
+        --tide-booking-decrement-increment-icon-width: 15px;
+        --tide-booking-decrement-increment-icon-height: 15px;
+        --tide-booking-decrement-increment-icon-color: var(--tide-booking-color-primary);
+    
+        //INCREMENT__DECREMENT--btns--hover
+        --tide-booking-decrement-increment-background-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+        --tide-booking-decrement-increment-color-hover: var(--tide-booking-color-primary-dark);
+        --tide-booking-decrement-increment-border-hover: 0px solid var(--tide-booking-color-primary-fade);
+    
+        //INCREMENT__DECREMENT--btns--icon--hover
+        --tide-booking-decrement-increment-icon-color-hover: var(--tide-booking-color-primary-dark);
+    
+        //INCREMENT__DECREMENT--btns--focus
+        --tide-booking-decrement-increment-background-focus: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+        --tide-booking-decrement-increment-color-focus: var(--tide-booking-color-primary);
+        --tide-booking-decrement-increment-border-focus: 0px solid var(--tide-booking-color-primary-fade);
+  
+        //INCREMENT__DECREMENT--btns--icon--focus
+        --tide-booking-decrement-increment-icon-color-focus: var(--tide-booking-color-primary-dark);
+    
+        //INCREMENT__DECREMENT--LABEL
+        --tide-booking-decrement-increment-label-font: var(--tide-booking-font-size-body);
+        --tide-booking-decrement-increment-label-font-weight: 400;
+        --tide-booking-decrement-increment-label-color: var(--tide-booking-black);
+    
+        //INCREMENT__DECREMENT--NUMBER
+        --tide-booking-decrement-increment-number-font: var(--tide-booking-font-size-body);
+        --tide-booking-decrement-increment-number-font-weight: 400;
+        --tide-booking-decrement-increment-number-color: var(--tide-booking-color-primary);
+    
+
+    //DROPDOWN
+    --tide-booking-dropdown-background: var(--tide-booking-white);
+    --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-medium);
+    --tide-booking-dropdown-border-radius: 5px;
+    --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
+  
+    --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary-light);
+  
+    --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
+    --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
+  
+    --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
+  
+    //DATEPICKER
+    --tide-booking-datepicker-container-background: rgba(255, 255, 255, 0.97);
+    --tide-booking-datepicker-container-border: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-datepicker-close-color: var(--tide-booking-color-primary);
+  
+    --tide-booking-datepicker-prev-next-color: var(--tide-booking-color-primary);
+    --tide-booking-datepicker-prev-next-background: var(--tide-booking-transparent);
+  
+    --tide-booking-datepicker-day-labels-color: var(--tide-booking-black);
+  
+    --tide-booking-datepicker-month-color: var(--tide-booking-black);
+    --tide-booking-datepicker-month-font: var(--tide-booking-font-heading);
+  
+    //DATEPICKER--DAY
+    --tide-booking-datepicker-day-color: var(--tide-booking-gray-dark);
+    --tide-booking-datepicker-day-background: var(--tide-booking-gray-xlight);
+    --tide-booking-datepicker-day-border: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-datepicker-day-border-radius: 5px;
+  
+    //DATEPICKER--DAY--HOVER
+    --tide-booking-datepicker-day-border-hover: 1.5px solid var(--tide-booking-color-primary);
+    --tide-booking-datepicker-day-background-hover: var(--tide-booking-gray-xlight);
+    --tide-booking-datepicker-day-color-hover: var(--tide-booking-color-primary);
+  
+    //DATEPICKER--DAY--SELECTED
+    --tide-booking-datepicker-day-border-selected: 1.5px solid var(--tide-booking-color-primary);
+    --tide-booking-datepicker-day-background-selected: var(--tide-booking-color-primary);
+    --tide-booking-datepicker-day-color-selected: var(--tide-booking-white);
+  
+    //DATEPICKER--DAY--SELECTED--HOVER
+    --tide-booking-datepicker-day-border-selected-hover: 1.5px solid var(--tide-booking-color-primary-light);
+    --tide-booking-datepicker-day-background-selected-hover: var(--tide-booking-color-primary-light);
+    --tide-booking-datepicker-day-color-selected-hover: var(--tide-booking-white);
+  
+    //DATEPICKER--DAY--DISABLED
+    --tide-booking-datepicker-day-color-disabled: var(--tide-booking-gray-medium);
+    --tide-booking-datepicker-day-background-disabled: var(--tide-booking-gray-xlight);
+    --tide-booking-datepicker-day-border-disabled: 1.5px solid var(--tide-booking-gray-border-light);
+  
+    //DATEPICKER--DAY--OUTSIDE-MONTH
+    --tide-booking-datepicker-day-color-outside-month: var(--tide-booking-gray-medium);
+    --tide-booking-datepicker-day-background-outside-month: transparent;
+    --tide-booking-datepicker-day-border-outside-month: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-datepicker-day-opacity-outside-month: 0.6;
+  
+    //DATEPICKER--INPUT
+    --tide-booking-datepicker-input-height: 45px;
+    --tide-booking-datepicker-input-height-lg: 55px;
+    --tide-booking-datepicker-input-background: var(--tide-booking-white);
+    --tide-booking-datepicker-input-border: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-datepicker-input-border-radius: 5px;
+    --tide-booking-datepicker-input-color: var(--tide-booking-black);
+  
+    --tide-booking-datepicker-input-label-color: var(--tide-booking-color-primary-dark);
+  
+    //SPINNER
+    --tide-booking-spinner-border: 5px solid rgba(255, 255, 255, 0.2);
+    --tide-booking-spinner-border-top-color: #dce1ff;
+  
+    //ANIMATION
+    --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
+
+    //BOOKING-WIZARD
+    --tide-booking-wizard-background: var(--tide-booking-bg);
+    --tide-booking-wizard-title-color: var(--tide-booking-black);
+    --tide-booking-wizard-heading-color: var(--tide-booking-black);
+
+    //STEP-INDICATORS
+    --tide-booking-step-indicators-line-trough: 2px dashed var(--tide-booking-gray-medium);
+
+    --tide-booking-step-indicators-icon-color: var(--tide-booking-black);
+    --tide-booking-step-indicators-icon-background: var(--tide-booking-white);
+    --tide-booking-step-indicators-icon-border: 1px solid var(--tide-booking-gray-border-light);
+    --tide-booking-step-indicators-icon-border-radius: 50%;
+    --tide-booking-step-indicators-icon-font-family: var(--tide-booking-font-heading);
+    --tide-booking-step-indicators-icon-font-size: 16px;
+    --tide-booking-step-indicators-icon-font-weight: 400;
+    --tide-booking-step-indicators-icon-color-text: var(--tide-booking-black);
+
+    //STEP-INDICATORS--ACTIVE
+    --tide-booking-step-indicators-icon-color-active: var(--tide-booking-white);
+    --tide-booking-step-indicators-icon-background-active: var(--tide-booking-color-primary);
+    --tide-booking-step-indicators-icon-border-active: 1px solid var(--tide-booking-color-primary);
+    --tide-booking-step-indicators-icon-check-color-active: var(--tide-booking-white);
+    --tide-booking-step-indicators-icon-color-text-active: var(--tide-booking-color-primary);
+
+    //STEP-INDICATORS--COMPLETED
+    --tide-booking-step-indicators-icon-color-completed: var(--tide-booking-white);
+    --tide-booking-step-indicators-icon-background-completed: var(--tide-booking-color-primary);
+    --tide-booking-step-indicators-icon-border-completed: 1px solid var(--tide-booking-color-primary);
+    --tide-booking-step-indicators-icon-check-color-completed: var(--tide-booking-white);
+    --tide-booking-step-indicators-icon-color-text-completed: var(--tide-booking-transparent);
+
+
+    //SIDEBAR
+    //SIDEBAR--HEADER
+    --tide-booking-sidebar-header-background: var(--tide-booking-color-primary-gradient);
+    --tide-booking-sidebar-header-color: var(--tide-booking-white);
+    --tide-booking-sidebar-header-font-family: var(--tide-booking-font-heading);
+    --tide-booking-sidebar-header-font-size: 20px;
+    --tide-booking-sidebar-header-font-weight: 400;
+    --tide-booking-sidebar-header-border-radius: 10px 10px 0px 0px;
+
+    //SIDEBAR--BODY
+    --tide-booking-sidebar-body-background: var(--tide-booking-white);
+    --tide-booking-sidebar-body-border: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-sidebar-body-border-radius: 5px;
+    --tide-booking-sidebar-body-font-family: var(--tide-booking-font-body);
+    --tide-booking-sidebar-body-font-size: 16px;
+    --tide-booking-sidebar-body-font-weight: 400;
+    --tide-booking-sidebar-body-color: var(--tide-booking-gray-dark);
+
+    --tide-booking-sidebar-body-label-color: var(--tide-booking-black);
+    --tide-booking-sidebar-body-label-font-size: 16px;
+    --tide-booking-sidebar-body-label-font-weight: 400;
+
+    --tide-booking-sidebar-body-title-color: var(--tide-booking-black);
+    --tide-booking-sidebar-body-title-font-size: 18px;
+    --tide-booking-sidebar-body-title-font-family: var(--tide-booking-font-heading);
+    --tide-booking-sidebar-body-title-font-weight: 600;
+
+    --tide-booking-sidebar-body-flight-font-weight: 600;
+    --tide-booking-sidebar-body-flight-color: var(--tide-booking-gray-dark);
+
+    //SIDEBAR--FOOTER
+    --tide-booking-sidebar-footer-background: var(--tide-booking-white);
+    --tide-booking-sidebar-footer-border: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-sidebar-footer-border-radius: 0px 0px 10px 10px;
+
+    --tide-booking-sidebar-footer-advance-font-size: 18px;
+    --tide-booking-sidebar-footer-advance-font-weight: 400;
+    --tide-booking-sidebar-footer-advance-color: var(--tide-booking-gray-medium);
+
+    --tide-booking-sidebar-footer-total-font-size: 20px;
+    --tide-booking-sidebar-footer-total-font-weight: 600;
+    --tide-booking-sidebar-footer-total-color: var(--tide-booking-color-primary);
+
+    --tide-booking-sidebar-footer-small-font-size: 14px;
+    --tide-booking-sidebar-footer-small-font-weight: 400;
+    --tide-booking-sidebar-footer-small-color: var(--tide-booking-gray-medium);
+    --tide-booking-sidebar-footer-small-strong-color: var(--tide-booking-gray-dark);
+
+    //STEP-1--FLIGHT-OPTIONS
+    --tide-booking-flight-options-card-background: var(--tide-booking-gray-light);
+    --tide-booking-flight-options-card-border: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-flight-options-card-border-radius: 10px;
+     
+    --tide-booking-flight-options-card-header-background: var(--tide-booking-gray-light);
+    --tide-booking-flight-options-card-header-border: 1.5px solid var(--tide-booking-white);
+  
+    --tide-booking-flight-options-times-title-font-family: var(--tide-booking-font-body);
+
+    --tide-booking-flight-options-times-title-color: var(--tide-booking-black);
+    --tide-booking-flight-options-times-title-font-weight: 700;
+
+    --tide-booking-flight-options-dapart-arrive-icon--color: var(--tide-booking-color-primary);
+   
+    --tide-booking-flight-options-times-font-family: var(--tide-booking-font-body);
+    --tide-booking-flight-options-times-color: var(--tide-booking-gray-dark);
+
+    --tide-booking-flight-options-stops-line-color: var(--tide-booking-color-primary);
+    --tide-booking-flight-options-stop-color: var(--tide-booking-color-primary);
+    --tide-booking-flight-options-stop-border: 3px solid var(--tide-booking-white);
+
+    --tide-booking-flight-options-detail-card-background: var(--tide-booking-white);
+    --tide-booking-flight-options-detail-card-border: none;
+    --tide-booking-flight-options-detail-card-border-radius: 10px;
+
+
+    --tide-booking-flight-options-detail-toggle-icon-color: var(--tide-booking-color-primary);
+    --tide-booking-flight-options-detail-toggle-background: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
+    --tide-booking-flight-options-detail-toggle-border: none;
+    --tide-booking-flight-options-detail-toggle-border-radius: 5px;
+
+    //HOVER,FOCUS
+    --tide-booking-flight-options-detail-toggle-icon-color-hover: var(--tide-booking-color-primary-dark);
+    --tide-booking-flight-options-detail-toggle-background-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+    --tide-booking-flight-options-detail-toggle-border-hover: none;
+
+
+    //FLIGHT-OPTIONS--FILTER
+    --tide-booking-flight-options-filter-container-background: var(--tide-booking-white);
+    --tide-booking-flight-options-filter-container-box-shadow: 0px 0px 5px rgba(158, 158, 158, 0.447);
+
+        //FLIGHT-OPTIONS--FILTER--BTN
+        --tide-booking-flight-options-filter-btn-background: var(--tide-booking-transparent);
+        --tide-booking-flight-options-filter-btn-color: var(--tide-booking-color-primary);
+        --tide-booking-flight-options-filter-btn-border: 1.5px solid var(--tide-booking-color-primary);
+        --tide-booking-flight-options-filter-btn-border-radius: 5px;
+        --tide-booking-flight-options-filter-btn-icon-color: var(--tide-booking-color-primary);
+
+        --tide-booking-flight-options-filter-btn-hover-background: var(--tide-booking-color-primary-gradient);
+        --tide-booking-flight-options-filter-btn-hover-color: var(--tide-booking-white);
+        --tide-booking-flight-options-filter-btn-hover-border: 1.5px solid var(--tide-booking-transparent);
+        --tide-booking-flight-options-filter-btn-hover-icon-color: var(--tide-booking-white);
+
+
+        //FLIGHT-OPTIONS--FILTER--HEADER
+        --tide-booking-flight-options-filter-header-text-color: var(--tide-booking-gray-dark);
+        --tide-booking-flight-options-filter-header-text-font-weight: 300;
+        --tide-booking-flight-options-filter-header-text-strong-color: var(--tide-booking-color-secondary);  
+        --tide-booking-flight-options-filter-header-text-strong-font-weight: 600;  
+        
+        //FLIGHT-OPTIONS--FILTER--GROUP-TITLE
+        --tide-booking-flight-options-filter-group-title-text-color: var(--tide-booking-gray-dark);
+        --tide-booking-flight-options-filter-group-title-text-font-weight: 500;
+        --tide-booking-flight-options-filter-group-title-text-font-family: var(--tide-booking-font-body);
+        --tide-booking-flight-options-filter-group-title-text-border: 1.5px solid var(--tide-booking-gray-border-light);
+
+        --tide-booking-flight-options-filter-group-title-subtext-color: var(--tide-booking-gray-dark);
+        --tide-booking-flight-options-filter-group-title-subtext-font-weight: 400;
+        --tide-booking-flight-options-filter-group-title-subtext-font-family: var(--tide-booking-font-body);
+   
+        
+    //STEP-2--ROOM-OPTIONS
+
+    --tide-booking-room-options-card-background: var(--tide-booking-white);
+    --tide-booking-room-options-card-border: 1.5px solid var(--tide-booking-gray-border-light);
+    --tide-booking-room-options-card-border-radius: 10px;
+
+    --tide-booking-room-options-image-border-radius: 10px;
+
+    --tide-booking-room-options-usp-list-color: var(--tide-booking-gray-dark);
+    --tide-booking-room-options-usp-list-font-weight: 400;
+    --tide-booking-room-options-usp-list-icon-color: var(--tide-booking-color-primary);
+
+    --tide-booking-room-options-title-color: var(--tide-booking-black);
+    --tide-booking-room-options-title-font-family: var(--tide-booking-font-heading);
+    --tide-booking-room-options-title-font-weight: 500;
+
+    --tide-booking-room-options-dropdown-select-border: 1.5px solid var(--tide-booking-color-primary-light);
+    --tide-booking-room-options-dropdown-select-border-radius: 5px;
+    --tide-booking-room-options-dropdown-select-font-family: var(--tide-booking-font-body);
+    --tide-booking-room-options-dropdown-select-color: var(--tide-booking-black);
+    --tide-booking-room-options-dropdown-select-background: var(--tide-booking-white);
+    --tide-booking-room-options-dropdown-select-border-focus: 1.5px solid var(--tide-booking-color-primary);
+
+    --tide-booking-room-options-dropdown-select-icon-color: var(--tide-booking-color-primary);
+
+
+    //STEP-3 EXTA-OPTIONS
+    --tide-booking-extra-options-card-background: var(--tide-booking-white);
+
+    
+
+}   
+
+
+  

package/styles/booking-wizard.scss

@@ -1,4 +1,26 @@
 // SCOPE
 #tide-booking {
-  @import "../playground/src/scss/main.scss";
+  @import "./components/variables";
+  // @import "../playground/src/scss/main.scss";
+  @import "./components/mixins";
+  @import "./components/placeholders";
+  @import "./components/base";
+  @import "./components/form";
+  @import "./components/button";
+  @import "./components/cta";
+
+  @import "./components/step-indicators";
+  @import "./components/booking";
+  @import "./components/pricing-summary";
+  @import "./components/flight-option";
+  @import "./components/checkbox";
+  @import "./components/tree";
+  @import "./components/list";
+  @import "./components/select-wrapper";
+  @import "./components/table";
+
+  @extend %reset;
+  @include body;
+  @extend %scrollbar-thin;
+
 }