@agorapulse/ui-theme 0.0.3 → 1.0.0-SNAPSHOT

package/assets/desktop_variables.css

@@ -0,0 +1,616 @@
+:root {
+  --ref-animation-long: 400ms;
+  --ref-animation-normal: 250ms;
+  --ref-animation-short: 150ms;
+  --ref-animation-xshort: 75ms;
+  --ref-border-radius-sm: 4px;
+  --ref-border-radius-md: 6px;
+  --ref-border-radius-lg: 8px;
+  --ref-color-white: #FFFFFF;
+  --ref-color-background: #F9F9FA;
+  --ref-color-orange-10: #FFEFE9;
+  --ref-color-orange-20: #FFE1D4;
+  --ref-color-orange-40: #FFC2A8;
+  --ref-color-orange-60: #FFA47D;
+  --ref-color-orange-80: #FF7E46;
+  --ref-color-orange-100: #FF6726;
+  --ref-color-orange-150: #C83E07;
+  --ref-color-electric-blue-10: #E8F4FF;
+  --ref-color-electric-blue-20: #D1E8FF;
+  --ref-color-electric-blue-40: #A2D1FF;
+  --ref-color-electric-blue-60: #74BBFE;
+  --ref-color-electric-blue-80: #3A9EFE;
+  --ref-color-electric-blue-100: #178DFE;
+  --ref-color-electric-blue-150: #0E72D6;
+  --ref-color-electric-blue-05: #F3F9FF;
+  --ref-color-soft-blue-10: #EFF5FC;
+  --ref-color-soft-blue-20: #DFEDFA;
+  --ref-color-soft-blue-40: #C0DBF4;
+  --ref-color-soft-blue-60: #A0C8EF;
+  --ref-color-soft-blue-80: #78B1E8;
+  --ref-color-soft-blue-100: #61A4E4;
+  --ref-color-soft-blue-150: #2873BA;
+  --ref-color-grey-10: #EAECEF;
+  --ref-color-grey-20: #D6DAE0;
+  --ref-color-grey-40: #AEB5C1;
+  --ref-color-grey-60: #858FA1;
+  --ref-color-grey-80: #5D6A82;
+  --ref-color-grey-100: #344563;
+  --ref-color-grey-150: #212E44;
+  --ref-color-grey-05: #F5F5F7;
+  --ref-color-grey-bg: #F9F9FA;
+  --ref-color-green-10: #ECF7ED;
+  --ref-color-green-20: #DAF1DD;
+  --ref-color-green-40: #B5E3BB;
+  --ref-color-green-60: #8FD498;
+  --ref-color-green-80: #61C26D;
+  --ref-color-green-100: #45B854;
+  --ref-color-green-150: #0F821D;
+  --ref-color-tag-orange-10: #FFF8E6;
+  --ref-color-tag-orange-20: #FEF0CC;
+  --ref-color-tag-orange-40: #FDE199;
+  --ref-color-tag-orange-60: #FDD366;
+  --ref-color-tag-orange-80: #FCC026;
+  --ref-color-tag-orange-100: #FBB500;
+  --ref-color-tag-orange-150: #A66200;
+  --ref-color-yellow-10: #FFFDE9;
+  --ref-color-yellow-20: #FFFBD2;
+  --ref-color-yellow-40: #FFF6A5;
+  --ref-color-yellow-60: #FFF279;
+  --ref-color-yellow-80: #FFEC41;
+  --ref-color-yellow-100: #FFE91F;
+  --ref-color-yellow-150: #A56608;
+  --ref-color-red-10: #FDE7E7;
+  --ref-color-red-20: #FAD0D0;
+  --ref-color-red-40: #F6A1A1;
+  --ref-color-red-60: #F17171;
+  --ref-color-red-80: #EB3636;
+  --ref-color-red-100: #E81313;
+  --ref-color-red-150: #D80505;
+  --ref-color-purple-10: #EFEDF8;
+  --ref-color-purple-20: #E0DDF2;
+  --ref-color-purple-40: #C1BBE6;
+  --ref-color-purple-60: #A398D9;
+  --ref-color-purple-80: #7C6DC9;
+  --ref-color-purple-100: #6554C0;
+  --ref-color-purple-150: #3C2C95;
+  --ref-color-purple-05: #F6F8FF;
+  --ref-color-menthol-10: #F1F9F8;
+  --ref-color-menthol-20: #CFECEA;
+  --ref-color-menthol-40: #9FD9D6;
+  --ref-color-menthol-60: #64C8BC;
+  --ref-color-menthol-80: #1DBEB0;
+  --ref-color-menthol-100: #0FA09B;
+  --ref-color-menthol-150: #057E7A;
+  --ref-color-web-100: #1F1F1F;
+  --ref-color-facebook-10: #e7f1fd;
+  --ref-color-facebook-100: #0866FF;
+  --ref-color-instagram-10: #fbe9f1;
+  --ref-color-instagram-100: #DD2A7B;
+  --ref-color-twitter-10: #e8f5fd;
+  --ref-color-twitter-100: #1DA1F2;
+  --ref-color-x-100: #000000;
+  --ref-color-linkedin-10: #e6eff9;
+  --ref-color-linkedin-100: #2668B2;
+  --ref-color-youtube-10: #fee5e5;
+  --ref-color-youtube-100: #FE0101;
+  --ref-color-tiktok-default-10: #e5e5e5;
+  --ref-color-tiktok-default-100: #000000;
+  --ref-color-tiktok-blue-10: #e9fdfd;
+  --ref-color-tiktok-blue-100: #25F4EE;
+  --ref-color-tiktok-red-10: #fee9ee;
+  --ref-color-tiktok-red-100: #FE2C55;
+  --ref-color-pinterest-10: #fee5e5;
+  --ref-color-pinterest-100: #E60023;
+  --ref-font-family: Averta;
+  --ref-font-size-xs: 12px;
+  --ref-font-size-sm: 14px;
+  --ref-font-size-md: 16px;
+  --ref-font-size-lg: 18px;
+  --ref-font-size-xl: 20px;
+  --ref-font-size-xxl: 24px;
+  --ref-font-size-xxxl: 28px;
+  --ref-font-weight-regular: 400;
+  --ref-font-weight-bold: 700;
+  --ref-font-weight-extra-bold: 800;
+  --ref-font-weight-black: 900;
+  --ref-font-line-height-xxs: 14px;
+  --ref-font-line-height-xs: 16px;
+  --ref-font-line-height-sm: 18px;
+  --ref-font-line-height-md: 20px;
+  --ref-font-line-height-lg: 24px;
+  --ref-font-line-height-xl: 32px;
+  --ref-font-line-height-xxl: 36px;
+  --ref-spacing-xxxs: 4px;
+  --ref-spacing-xxs: 8px;
+  --ref-spacing-xs: 12px;
+  --ref-spacing-sm: 16px;
+  --ref-spacing-md: 24px;
+  --ref-spacing-lg: 32px;
+  --ref-spacing-xl: 40px;
+  --ref-spacing-xxl: 48px;
+  --ref-spacing-xxxl: 60px;
+  --ref-transition-duration: 250ms;
+  --sys-border-color-default: #EAECEF;
+  --sys-border-color-active: #178DFE;
+  --sys-border-color-error: #E81313;
+  --sys-border-radius-sm: 4px;
+  --sys-border-radius-md: 4px;
+  --sys-border-radius-lg: 8px;
+  --sys-color-main-default-bg-default: #FF6726;
+  --sys-color-main-default-bg-hover: #FF7E46;
+  --sys-color-main-default-bg-clicked: #FFA47D;
+  --sys-color-main-default-bg-disabled: #FFE1D4;
+  --sys-color-main-default-text: #FFFFFF;
+  --sys-color-main-light-bg: #FFEFE9;
+  --sys-color-main-light-text: #C83E07;
+  --sys-color-main-text: #FF6726;
+  --sys-color-accent-default-bg-default: #178DFE;
+  --sys-color-accent-default-bg-hover: #3A9EFE;
+  --sys-color-accent-default-bg-clicked: #74BBFE;
+  --sys-color-accent-default-bg-disabled: #D1E8FF;
+  --sys-color-accent-default-text: #FFFFFF;
+  --sys-color-accent-light-bg: #F3F9FF;
+  --sys-color-accent-light-text: #0E72D6;
+  --sys-color-accent-text: #178DFE;
+  --sys-color-error-default-bg-default: #E81313;
+  --sys-color-error-default-bg-hover: #EB3636;
+  --sys-color-error-default-bg-clicked: #F17171;
+  --sys-color-error-default-bg-disabled: #FAD0D0;
+  --sys-color-error-default-text: #FFFFFF;
+  --sys-color-error-light-bg: #FDE7E7;
+  --sys-color-error-light-text: #D80505;
+  --sys-color-error-text: #E81313;
+  --sys-color-warning-default-bg-default: #FFE91F;
+  --sys-color-warning-default-bg-hover: #FFEC41;
+  --sys-color-warning-default-bg-clicked: #FFF279;
+  --sys-color-warning-default-bg-disabled: #FFFBD2;
+  --sys-color-warning-default-text: #FFFFFF;
+  --sys-color-warning-light-bg: #FFFDE9;
+  --sys-color-warning-light-text: #A56608;
+  --sys-color-warning-text: #FFE91F;
+  --sys-color-success-default-bg-default: #45B854;
+  --sys-color-success-default-bg-hover: #61C26D;
+  --sys-color-success-default-bg-clicked: #8FD498;
+  --sys-color-success-default-bg-disabled: #DAF1DD;
+  --sys-color-success-default-text: #FFFFFF;
+  --sys-color-success-light-bg: #ECF7ED;
+  --sys-color-success-light-text: #0F821D;
+  --sys-color-success-text: #45B854;
+  --sys-color-feature-lock-default-bg-default: #6554C0;
+  --sys-color-feature-lock-default-bg-hover: #7C6DC9;
+  --sys-color-feature-lock-default-bg-clicked: #A398D9;
+  --sys-color-feature-lock-default-bg-disabled: #E0DDF2;
+  --sys-color-feature-lock-default-text: #FFFFFF;
+  --sys-color-feature-lock-light-bg: #EFEDF8;
+  --sys-color-feature-lock-light-text: #3C2C95;
+  --sys-color-feature-lock-text: #6554C0;
+  --sys-icon-sm: 14px;
+  --sys-icon-md: 16px;
+  --sys-radio-transition-duration: 250ms;
+  --sys-text-color-default: #344563;
+  --sys-text-color-light: #5D6A82;
+  --sys-text-color-error: #E81313;
+  --sys-text-style-h0-font-family: Averta;
+  --sys-text-style-h0-size: 20px;
+  --sys-text-style-h0-weight: 900;
+  --sys-text-style-h0-line-height: 36px;
+  --sys-text-style-marketing-font-family: Averta;
+  --sys-text-style-marketing-size: 24px;
+  --sys-text-style-marketing-weight: 800;
+  --sys-text-style-marketing-line-height: 36px;
+  --sys-text-style-h1-font-family: Averta;
+  --sys-text-style-h1-size: 24px;
+  --sys-text-style-h1-weight: 700;
+  --sys-text-style-h1-line-height: 32px;
+  --sys-text-style-h2-font-family: Averta;
+  --sys-text-style-h2-size: 18px;
+  --sys-text-style-h2-weight: 700;
+  --sys-text-style-h2-line-height: 24px;
+  --sys-text-style-subtitle-font-family: Averta;
+  --sys-text-style-subtitle-size: 16px;
+  --sys-text-style-subtitle-weight: 400;
+  --sys-text-style-subtitle-line-height: 20px;
+  --sys-text-style-h3-font-family: Averta;
+  --sys-text-style-h3-size: 16px;
+  --sys-text-style-h3-weight: 700;
+  --sys-text-style-h3-line-height: 24px;
+  --sys-text-style-h4-font-family: Averta;
+  --sys-text-style-h4-size: 14px;
+  --sys-text-style-h4-weight: 700;
+  --sys-text-style-h4-line-height: 20px;
+  --sys-text-style-body-font-family: Averta;
+  --sys-text-style-body-size: 14px;
+  --sys-text-style-body-weight: 400;
+  --sys-text-style-body-line-height: 18px;
+  --sys-text-style-body-bold-font-family: Averta;
+  --sys-text-style-body-bold-size: 14px;
+  --sys-text-style-body-bold-weight: 700;
+  --sys-text-style-body-bold-line-height: 18px;
+  --sys-text-style-caption-font-family: Averta;
+  --sys-text-style-caption-size: 12px;
+  --sys-text-style-caption-weight: 400;
+  --sys-text-style-caption-line-height: 16px;
+  --sys-text-style-caption-bold-font-family: Averta;
+  --sys-text-style-caption-bold-size: 12px;
+  --sys-text-style-caption-bold-weight: 700;
+  --sys-text-style-caption-bold-line-height: 16px;
+  --sys-button-height: 36px;
+  --sys-icon-button-padding: 10px;
+  --sys-icon-button-width: 36px;
+  --sys-icon-button-height: 36px;
+  --comp-badge-text-style-font-family: Averta;
+  --comp-badge-text-style-size: 12px;
+  --comp-badge-text-style-font-weight: 700;
+  --comp-badge-text-style-line-height: 16px;
+  --comp-badge-height: 16px;
+  --comp-badge-padding-left: 2px;
+  --comp-badge-padding-right: 2px;
+  --comp-badge-orange-color: #FFFFFF;
+  --comp-badge-orange-background-color: #FF6726;
+  --comp-badge-blue-color: #0E72D6;
+  --comp-badge-blue-background-color: #E8F4FF;
+  --comp-button-text-size: 14px;
+  --comp-button-text-font-family: Averta;
+  --comp-button-text-weight: 700;
+  --comp-button-text-line-height: 20px;
+  --comp-button-padding-horizontal: 8px;
+  --comp-button-padding-vertical: 16px;
+  --comp-button-height: 36px;
+  --comp-button-border-radius: 4px;
+  --comp-button-spacing: 8px;
+  --comp-counter-text-style-font-family: Averta;
+  --comp-counter-text-style-size: 12px;
+  --comp-counter-text-style-font-weight: 700;
+  --comp-counter-text-style-line-height: 16px;
+  --comp-counter-big-text-style-font-family: Averta;
+  --comp-counter-big-text-style-size: 14px;
+  --comp-counter-big-text-style-font-weight: 700;
+  --comp-counter-big-text-style-line-height: 18px;
+  --comp-counter-big-height: 18px;
+  --comp-counter-height: 16px;
+  --comp-counter-border-radius: 2px;
+  --comp-counter-notif-border-radius: 16px;
+  --comp-counter-notif-min-width: 16px;
+  --comp-counter-notif-color: #FFFFFF;
+  --comp-counter-notif-background-color: #FF6726;
+  --comp-counter-orange-color: #FF6726;
+  --comp-counter-orange-with-background-color: #FFFFFF;
+  --comp-counter-orange-with-background-background-color: #FF6726;
+  --comp-counter-blue-color: #0E72D6;
+  --comp-counter-blue-with-background-background-color: #E8F4FF;
+  --comp-counter-grey-color: #344563;
+  --comp-counter-grey-with-background-background-color: #EAECEF;
+  --comp-dot-stepper-dot-size: 12px;
+  --comp-dot-stepper-dot-active-background-color: #0E72D6;
+  --comp-dot-stepper-dot-inactive-hovered-background-color: #74BBFE;
+  --comp-dot-stepper-dot-inactive-clicked-background-color: #178DFE;
+  --comp-dot-stepper-dot-inactive-focused-background-color: #74BBFE;
+  --comp-dot-stepper-dot-inactive-border-width: 2px;
+  --comp-dot-stepper-dot-inactive-border-color: #AEB5C1;
+  --comp-dot-stepper-spacing: 8px;
+  --comp-icon-button-padding: 10px;
+  --comp-icon-button-width: 36px;
+  --comp-icon-button-height: 36px;
+  --comp-icon-button-border-radius: 8px;
+  --comp-infobox-border-width: 4px;
+  --comp-infobox-border-radius: 4px;
+  --comp-infobox-text-title-size: 16px;
+  --comp-infobox-text-title-font-family: Averta;
+  --comp-infobox-text-title-weight: 700;
+  --comp-infobox-text-title-line-height: 24px;
+  --comp-infobox-text-content-size: 14px;
+  --comp-infobox-text-content-font-family: Averta;
+  --comp-infobox-text-content-weight: 400;
+  --comp-infobox-text-content-line-height: 18px;
+  --comp-infobox-padding-right: 12px;
+  --comp-infobox-padding-left: 16px;
+  --comp-infobox-padding-bottom: 12px;
+  --comp-infobox-padding-top: 12px;
+  --comp-infobox-button-margin-right: 8px;
+  --comp-infobox-button-margin-left: 8px;
+  --comp-infobox-gap: 12px;
+  --comp-infobox-error-background-color: #FAD0D0;
+  --comp-infobox-error-border-left-color: #D80505;
+  --comp-infobox-error-icon-color: #D80505;
+  --comp-infobox-warning-background-color: #FEF0CC;
+  --comp-infobox-warning-border-left-color: #A66200;
+  --comp-infobox-warning-icon-color: #A66200;
+  --comp-infobox-info-background-color: #D1E8FF;
+  --comp-infobox-info-border-left-color: #0E72D6;
+  --comp-infobox-info-icon-color: #0E72D6;
+  --comp-infobox-success-background-color: #DAF1DD;
+  --comp-infobox-success-border-left-color: #0F821D;
+  --comp-infobox-success-icon-color: #0F821D;
+  --comp-input-width-default: 256px;
+  --comp-input-height: 36px;
+  --comp-input-padding-horizontal: 12px;
+  --comp-input-spacing-horizontal: 8px;
+  --comp-input-border-radius: 4px;
+  --comp-input-border-default-color: #D6DAE0;
+  --comp-input-border-hover-color: #AEB5C1;
+  --comp-input-border-focused-color: #178DFE;
+  --comp-input-border-error-color: #E81313;
+  --comp-input-border-success-color: #45B854;
+  --comp-input-border-disabled-color: #D6DAE0;
+  --comp-input-fill-color: #FFFFFF;
+  --comp-input-fill-disabled-color: #D6DAE0;
+  --comp-input-icon-size: 16px;
+  --comp-input-icon-color: #858FA1;
+  --comp-input-text-font-family: Averta;
+  --comp-input-text-size: 14px;
+  --comp-input-text-font-weight: 400;
+  --comp-input-text-line-height: 18px;
+  --comp-input-text-default-color: #344563;
+  --comp-input-text-disabled-color: #5D6A82;
+  --comp-input-text-placeholder-color: #858FA1;
+  --comp-forms-label-font-family: Averta;
+  --comp-forms-label-size: 14px;
+  --comp-forms-label-font-weight: 400;
+  --comp-forms-label-line-height: 18px;
+  --comp-forms-label-text-color: #344563;
+  --comp-forms-label-description-text-font-family: Averta;
+  --comp-forms-label-description-text-size: 12px;
+  --comp-forms-label-description-text-font-weight: 400;
+  --comp-forms-label-description-text-line-height: 16px;
+  --comp-forms-label-description-text-color: #5D6A82;
+  --comp-forms-label-spacing-vertical: 4px;
+  --comp-forms-label-padding-bottom: 8px;
+  --comp-forms-status-icon-size: 16px;
+  --comp-forms-status-icon-error-color: #E81313;
+  --comp-forms-status-icon-success-color: #45B854;
+  --comp-forms-status-spacing-vertical: 4px;
+  --comp-forms-status-text-font-family: Averta;
+  --comp-forms-status-text-size: 14px;
+  --comp-forms-status-text-font-weight: 400;
+  --comp-forms-status-text-line-height: 18px;
+  --comp-forms-status-text-error-color: #E81313;
+  --comp-forms-status-text-success-color: #0F821D;
+  --comp-text-area-width-default: 256px;
+  --comp-text-area-height: 80px;
+  --comp-text-area-padding-horizontal: 12px;
+  --comp-text-area-spacing-horizontal: 8px;
+  --comp-text-area-border-radius: 4px;
+  --comp-text-area-border-default-color: #858FA1;
+  --comp-text-area-border-hover-color: #5D6A82;
+  --comp-text-area-border-focused-color: #178DFE;
+  --comp-text-area-border-error-color: #E81313;
+  --comp-text-area-border-success-color: #45B854;
+  --comp-text-area-border-disabled-color: #D6DAE0;
+  --comp-text-area-fill-color: #FFFFFF;
+  --comp-text-area-fill-disabled-color: #D6DAE0;
+  --comp-text-area-icon-size: 16px;
+  --comp-text-area-icon-color: #858FA1;
+  --comp-text-area-text-font-family: Averta;
+  --comp-text-area-text-size: 14px;
+  --comp-text-area-text-font-weight: 400;
+  --comp-text-area-text-line-height: 18px;
+  --comp-text-area-text-default-color: #344563;
+  --comp-text-area-text-disabled-color: #5D6A82;
+  --comp-text-area-text-placeholder-color: #858FA1;
+  --comp-label-text-style-font-family: Averta;
+  --comp-label-text-style-size: 14px;
+  --comp-label-text-style-font-weight: 400;
+  --comp-label-text-style-line-height: 18px;
+  --comp-label-text-color: #344563;
+  --comp-label-border-radius: 24px;
+  --comp-label-background-color: #D1E8FF;
+  --comp-label-height: 24px;
+  --comp-label-padding-left: 8px;
+  --comp-label-padding-right: 8px;
+  --comp-label-closable-spacing: 4px;
+  --comp-label-closable-padding-right: 2px;
+  --comp-link-text-font-family: Averta;
+  --comp-link-text-size: 14px;
+  --comp-link-text-font-weight: 400;
+  --comp-link-text-line-height: 18px;
+  --comp-link-small-text-style-font-family: Averta;
+  --comp-link-small-text-style-size: 12px;
+  --comp-link-small-text-style-font-weight: 400;
+  --comp-link-small-text-style-line-height: 16px;
+  --comp-link-big-text-style-font-family: Averta;
+  --comp-link-big-text-style-size: 16px;
+  --comp-link-big-text-style-font-weight: 400;
+  --comp-link-big-text-style-line-height: 20px;
+  --comp-link-standalone-default-text-style-font-family: Averta;
+  --comp-link-standalone-default-text-style-size: 14px;
+  --comp-link-standalone-default-text-style-font-weight: 700;
+  --comp-link-standalone-default-text-style-line-height: 18px;
+  --comp-link-standalone-small-text-style-font-family: Averta;
+  --comp-link-standalone-small-text-style-size: 12px;
+  --comp-link-standalone-small-text-style-font-weight: 700;
+  --comp-link-standalone-small-text-style-line-height: 16px;
+  --comp-link-default-color: #0E72D6;
+  --comp-link-hover-color: #3A9EFE;
+  --comp-link-clicked-color: #0E72D6;
+  --comp-link-disabled-color: #D1E8FF;
+  --comp-link-visited-color: #3C2C95;
+  --comp-link-spacing: 4px;
+  --comp-link-icon-size: 16px;
+  --comp-radio-transition-duration: 250ms;
+  --comp-select-icon-focused-color: #178DFE;
+  --comp-select-inline-label-text-font-family: Averta;
+  --comp-select-inline-label-text-size: 14px;
+  --comp-select-inline-label-text-font-weight: 400;
+  --comp-select-inline-label-text-line-height: 18px;
+  --comp-select-inline-label-text-color: #5D6A82;
+  --comp-select-inline-separator-color: #AEB5C1;
+  --comp-select-one-line-height: 40px;
+  --comp-select-one-line-spacing: 8px;
+  --comp-select-one-line-padding-horizontal: 16px;
+  --comp-select-one-line-background-color: #FFFFFF;
+  --comp-select-one-line-text-font-family: Averta;
+  --comp-select-one-line-text-size: 14px;
+  --comp-select-one-line-text-font-weight: 400;
+  --comp-select-one-line-text-line-height: 18px;
+  --comp-select-one-line-text-color: #344563;
+  --comp-select-one-line-selected-text-font-family: Averta;
+  --comp-select-one-line-selected-text-size: 14px;
+  --comp-select-one-line-selected-text-font-weight: 700;
+  --comp-select-one-line-selected-text-line-height: 18px;
+  --comp-select-one-line-selectable-selected-text-font-family: Averta;
+  --comp-select-one-line-selectable-selected-text-size: 14px;
+  --comp-select-one-line-selectable-selected-text-font-weight: 700;
+  --comp-select-one-line-selectable-selected-text-line-height: 18px;
+  --comp-select-two-line-height: unset;
+  --comp-select-two-line-padding-vertical: 8px;
+  --comp-select-two-line-title-text-font-family: Averta;
+  --comp-select-two-line-title-text-size: 14px;
+  --comp-select-two-line-title-text-font-weight: 700;
+  --comp-select-two-line-title-text-line-height: 18px;
+  --comp-select-two-line-title-text-color: #344563;
+  --comp-select-two-line-title-spacing: 8px;
+  --comp-select-two-line-caption-text-font-family: Averta;
+  --comp-select-two-line-caption-text-size: 12px;
+  --comp-select-two-line-caption-text-font-weight: 400;
+  --comp-select-two-line-caption-text-line-height: 16px;
+  --comp-select-two-line-caption-text-color: #5D6A82;
+  --comp-select-group-padding-horizontal: 16px;
+  --comp-select-group-padding-vertical: 8px;
+  --comp-select-group-border-top-color: #EAECEF;
+  --comp-select-group-background-color: #F9F9FA;
+  --comp-select-group-selected-gap: 8px;
+  --comp-select-group-text-font-family: Averta;
+  --comp-select-group-text-size: 12px;
+  --comp-select-group-text-font-weight: 700;
+  --comp-select-group-text-line-height: 16px;
+  --comp-select-group-text-color: #344563;
+  --comp-select-separator-padding-horizontal: 8px;
+  --comp-select-separator-padding-vertical: 8px;
+  --comp-select-separator-color: #EAECEF;
+  --comp-select-padding-vertical: 8px;
+  --comp-select-background-color: #FFFFFF;
+  --comp-select-shadow: 0px 4px 6px -2px rgba(52, 69, 99, 0.15), 0px 4px 25px -2px rgba(52, 69, 99, 0.15);
+  --comp-select-search-bar-padding-horizontal: 8px;
+  --comp-select-search-bar-padding-bottom: 8px;
+  --comp-select-search-bar-margin-bottom: 8px;
+  --comp-select-search-bar-border-bottom-color: #EAECEF;
+  --comp-select-search-bar-bottom-link-margin-top: 12px;
+  --comp-select-search-bar-bottom-link-padding-horizontal: 16px;
+  --comp-select-search-bar-bottom-link-padding-top: 12px;
+  --comp-select-search-bar-bottom-link-padding-bottom: 4px;
+  --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
+  --comp-snackbar-text-style-font-family: Averta;
+  --comp-snackbar-text-style-size: 14px;
+  --comp-snackbar-text-style-font-weight: 400;
+  --comp-snackbar-text-style-line-height: 18px;
+  --comp-snackbar-text-color: #344563;
+  --comp-snackbar-width: 420px;
+  --comp-snackbar-border-radius: 8px;
+  --comp-snackbar-padding-horizontal: 16px;
+  --comp-snackbar-padding-vertical: 12px;
+  --comp-snackbar-spacing: 12px;
+  --comp-snackbar-success-background-color: #DAF1DD;
+  --comp-snackbar-success-icon-color: #0F821D;
+  --comp-snackbar-error-background-color: #FAD0D0;
+  --comp-snackbar-error-icon-color: #D80505;
+  --comp-snackbar-shadow: 0px 7px 50px 0px rgba(0, 0, 0, 0.08);
+  --comp-split-button-text-size: 14px;
+  --comp-split-button-text-font-family: Averta;
+  --comp-split-button-text-weight: 700;
+  --comp-split-button-text-line-height: 20px;
+  --comp-split-button-padding-horizontal: 8px;
+  --comp-split-button-padding-vertical: 16px;
+  --comp-split-button-border-radius: 4px;
+  --comp-split-button-spacing: 8px;
+  --comp-status-card-text-style-font-family: Averta;
+  --comp-status-card-text-style-size: 12px;
+  --comp-status-card-text-style-font-weight: 400;
+  --comp-status-card-text-style-line-height: 16px;
+  --comp-status-card-text-color: #344563;
+  --comp-status-card-user-text-style-font-family: Averta;
+  --comp-status-card-user-text-style-size: 12px;
+  --comp-status-card-user-text-style-font-weight: 700;
+  --comp-status-card-user-text-style-line-height: 16px;
+  --comp-status-card-caption-text-style-font-family: Averta;
+  --comp-status-card-caption-text-style-size: 12px;
+  --comp-status-card-caption-text-style-font-weight: 700;
+  --comp-status-card-caption-text-style-line-height: 16px;
+  --comp-status-card-caption-text-color: #5D6A82;
+  --comp-status-card-spacing-vertical: 8px;
+  --comp-status-card-spacing-horizontal: 8px;
+  --comp-status-card-content-spacing: 4px;
+  --comp-status-card-padding-vertical: 12px;
+  --comp-status-card-padding-horizontal: 8px;
+  --comp-status-card-green-icon-color: #45B854;
+  --comp-status-card-green-background-color: #ECF7ED;
+  --comp-status-card-green-border-color: #DAF1DD;
+  --comp-status-card-tag-orange-icon-color: #FBB500;
+  --comp-status-card-tag-orange-background-color: #FFF8E6;
+  --comp-status-card-tag-orange-border-color: #FEF0CC;
+  --comp-status-card-blue-icon-color: #178DFE;
+  --comp-status-card-blue-background-color: #E8F4FF;
+  --comp-status-card-blue-border-color: #D1E8FF;
+  --comp-status-card-red-icon-color: #E81313;
+  --comp-status-card-red-background-color: #FDE7E7;
+  --comp-status-card-red-border-color: #FAD0D0;
+  --comp-status-card-orange-icon-color: #FF6726;
+  --comp-status-card-orange-background-color: #FFEFE9;
+  --comp-status-card-orange-border-color: #FFE1D4;
+  --comp-status-card-grey-icon-color: #344563;
+  --comp-status-card-grey-background-color: #EAECEF;
+  --comp-status-card-grey-border-color: #D6DAE0;
+  --comp-status-text-style-font-family: Averta;
+  --comp-status-text-style-size: 12px;
+  --comp-status-text-style-font-weight: 400;
+  --comp-status-text-style-line-height: 16px;
+  --comp-status-padding-horizontal: 8px;
+  --comp-status-height: 24px;
+  --comp-status-spacing: 4px;
+  --comp-status-color: #344563;
+  --comp-status-green-background-color: #ECF7ED;
+  --comp-status-green-dot-background-color: #45B854;
+  --comp-status-tag-orange-background-color: #FFF8E6;
+  --comp-status-tag-orange-dot-background-color: #A66200;
+  --comp-status-red-background-color: #FDE7E7;
+  --comp-status-red-dot-background-color: #E81313;
+  --comp-status-blue-background-color: #E8F4FF;
+  --comp-status-blue-dot-background-color: #178DFE;
+  --comp-status-orange-background-color: #FFEFE9;
+  --comp-status-orange-dot-background-color: #FF6726;
+  --comp-status-grey-background-color: #EAECEF;
+  --comp-status-grey-dot-background-color: #344563;
+  --comp-tag-text-style-font-family: Averta;
+  --comp-tag-text-style-size: 14px;
+  --comp-tag-text-style-font-weight: 400;
+  --comp-tag-text-style-line-height: 18px;
+  --comp-tag-border-radius: 4px;
+  --comp-tag-spacing: 4px;
+  --comp-tag-height: 24px;
+  --comp-tag-padding-left: 4px;
+  --comp-tag-padding-right: 4px;
+  --comp-tag-closable-padding-right: 2px;
+  --comp-tag-mini-padding-left: 2px;
+  --comp-tag-mini-padding-right: 2px;
+  --comp-tag-mini-height: 18px;
+  --comp-tag-blue-text-color: #0E72D6;
+  --comp-tag-blue-background-color: #E8F4FF;
+  --comp-tag-blue-border-color: #D1E8FF;
+  --comp-tag-blue-icon-color: #0E72D6;
+  --comp-tag-tag-orange-text-color: #A66200;
+  --comp-tag-tag-orange-background-color: #FFF8E6;
+  --comp-tag-tag-orange-border-color: #FEF0CC;
+  --comp-tag-tag-orange-icon-color: #A66200;
+  --comp-tag-menthol-text-color: #057E7A;
+  --comp-tag-menthol-background-color: #F1F9F8;
+  --comp-tag-menthol-border-color: #CFECEA;
+  --comp-tag-menthol-icon-color: #057E7A;
+  --comp-tag-grey-text-color: #344563;
+  --comp-tag-grey-background-color: #EAECEF;
+  --comp-tag-grey-border-color: #D6DAE0;
+  --comp-tag-grey-icon-color: #212E44;
+  --comp-tag-green-text-color: #0F821D;
+  --comp-tag-green-background-color: #ECF7ED;
+  --comp-tag-green-border-color: #DAF1DD;
+  --comp-tag-green-icon-color: #0F821D;
+  --comp-tag-red-text-color: #D80505;
+  --comp-tag-red-background-color: #FDE7E7;
+  --comp-tag-red-border-color: #FAD0D0;
+  --comp-tag-red-icon-color: #D80505;
+  --comp-tooltip-text-style-font-family: Averta;
+  --comp-tooltip-text-style-size: 14px;
+  --comp-tooltip-text-style-weight: 400;
+  --comp-tooltip-text-style-line-height: 18px;
+  --comp-tooltip-text-default-color: #FFFFFF;
+  --comp-tooltip-text-color-main-default-bg: #344563;
+}