@agorapulse/ui-theme 16.0.2 → 16.1.0-beta

package/assets/desktop_variables.css

@@ -136,7 +136,7 @@
   --sys-border-radius-sm: 4px;
   --sys-border-radius-md: 4px;
   --sys-border-radius-lg: 8px;
-  --sys-color-main-default-bg: #FF6726;
+  --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;
@@ -238,6 +238,17 @@
   --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;
@@ -247,6 +258,28 @@
   --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-icon-button-padding: 10px;
   --comp-icon-button-width: 36px;
   --comp-icon-button-height: 36px;
@@ -280,6 +313,82 @@
   --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: #858FA1;
+  --comp-input-border-hover-color: #5D6A82;
+  --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-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-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;
@@ -308,6 +417,68 @@
   --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-split-button-text-size: 14px;
   --comp-split-button-text-font-family: Averta;
   --comp-split-button-text-weight: 700;
@@ -316,6 +487,97 @@
   --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-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;

package/assets/mobile_variables.css

@@ -136,7 +136,7 @@
   --sys-border-radius-sm: 4px;
   --sys-border-radius-md: 4px;
   --sys-border-radius-lg: 8px;
-  --sys-color-main-default-bg: #FF6726;
+  --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;
@@ -238,6 +238,17 @@
   --sys-icon-button-padding: 8px;
   --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;
@@ -247,6 +258,28 @@
   --comp-button-height: 40px;
   --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-icon-button-padding: 8px;
   --comp-icon-button-width: 36px;
   --comp-icon-button-height: 36px;
@@ -280,6 +313,82 @@
   --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: #858FA1;
+  --comp-input-border-hover-color: #5D6A82;
+  --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-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-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;
@@ -308,6 +417,68 @@
   --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-split-button-text-size: 14px;
   --comp-split-button-text-font-family: Averta;
   --comp-split-button-text-weight: 700;
@@ -316,6 +487,97 @@
   --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-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;

package/package.json

@@ -1,24 +1,24 @@
 {
-  "name": "@agorapulse/ui-theme",
-  "version": "16.0.2",
-  "description": "Agorapulse UI Theme Library",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/agorapulse/design.git"
-  },
-  "author": "Arnaud BUSO",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/agorapulse/design/issues"
-  },
-  "scripts": {
-    "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
-  },
-  "homepage": "https://github.com/agorapulse/design#readme",
-  "peerDependencies": {
-    "@angular/material": "^16.2.9"
-  },
-  "devDependencies": {
-    "style-dictionary": "^3.7.2"
-  }
+    "name": "@agorapulse/ui-theme",
+    "version": "16.1.0-beta",
+    "description": "Agorapulse UI Theme Library",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/agorapulse/design.git"
+    },
+    "author": "Arnaud BUSO",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/agorapulse/design/issues"
+    },
+    "scripts": {
+        "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
+    },
+    "homepage": "https://github.com/agorapulse/design#readme",
+    "peerDependencies": {
+        "@angular/material": "^16.2.9"
+    },
+    "devDependencies": {
+        "style-dictionary": "^3.7.2"
+    }
 }