blip-ds 1.243.2 → 1.244.0

package/dist/collection/components/datepicker/datepicker.css

@@ -393,7 +393,7 @@
 }
 .datepicker__inputs__icon {
   cursor: pointer;
-  color: #8ca0b3;
+  color: var(--color-content-ghost, #6e7b91);
   display: flex;
   align-items: center;
   justify-content: space-evenly;
@@ -403,14 +403,14 @@
   margin-right: 8px;
 }
 .datepicker__inputs__icon:hover bds-icon:first-child {
-  color: #3f7de8;
+  color: var(--color-primary, #3f7de8);
 }
 .datepicker__menu {
   position: fixed;
   pointer-events: none;
   top: 0;
   left: 0;
-  background-color: #ffffff;
+  background-color: var(--color-surface-1, #ffffff);
   box-shadow: 0px 4px 10px rgba(51, 51, 51, 0.3);
   border-radius: 8px;
   padding: 16px;
@@ -427,8 +427,8 @@
 .datepicker__menu__message {
   padding: 8px 16px;
   border-radius: 8px;
-  background-color: #fff6a8;
-  color: #212a3c;
+  background-color: var(--color-warning, #fff6a8);
+  color: var(--color-content-din, #000);
   display: flex;
   align-items: center;
   margin-bottom: 24px;
@@ -442,7 +442,7 @@
   justify-content: flex-end;
   padding-top: 16px;
   margin-top: 16px;
-  border-top: 1px solid #d2dfe6;
+  border-top: 1px solid var(--color-content-ghost, #6e7b91);
 }
 .datepicker__menu__footer bds-button {
   margin-left: 16px;
@@ -476,79 +476,80 @@
   width: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: #ffffff;
-  border: 1px solid #d2dfe6;
+  background: var(--color-surface-1, #ffffff);
+  color: var(--color-content-default, #202c44);
+  border: 1px solid var(--color-surface-3, #e7edf4);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .datepicker__calendar__selectDate__select__input:hover {
-  border: 1px solid #3f7de8;
+  border: 1px solid var(--color-primary, #3f7de8);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .datepicker__calendar__selectDate__select__input.input--pressed {
-  border: 1px solid #3f7de8;
+  border: 1px solid var(--color-primary, #3f7de8);
   box-sizing: border-box;
   border-radius: 8px;
-  -webkit-box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
-  box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
+  -webkit-box-shadow: 0 0 0 2px var(--color-info, #80e3eb);
+  box-shadow: 0 0 0 2px var(--color-info, #80e3eb);
 }
 .datepicker__calendar__selectDate__select__input .input__icon {
-  color: #3f7de8;
-  background-color: #e8f2ff;
+  color: var(--color-primary, #3f7de8);
+  background-color: var(--color-surface-3, #e7edf4);
 }
 .datepicker__calendar__selectDate__select__input .input__container__label {
-  color: #8ca0b3;
+  color: var(--color-content-default, #202c44);
 }
 .datepicker__calendar__selectDate__select__input .input__container__label--pressed {
-  color: #3f7de8;
+  color: var(--color-primary, #3f7de8);
 }
 .datepicker__calendar__selectDate__select__input .input__container__text {
-  caret-color: #3f7de8;
-  color: #202c44;
+  caret-color: var(--color-primary, #3f7de8);
+  color: var(--color-content-default, #202c44);
 }
 .datepicker__calendar__selectDate__select__input__disable {
   cursor: not-allowed;
-  border: 1px solid #e7edf4;
+  border: 1px solid var(--color-surface-3, #e7edf4);
   box-sizing: border-box;
   border-radius: 8px;
   background: var(--color-surface-3, #e7edf4);
 }
 .datepicker__calendar__selectDate__select__input__disable:hover {
-  border: 1px solid #b9cbd3;
+  border: 1px solid var(--color-content-disable, #505f79);
   box-sizing: border-box;
   border-radius: 8px;
-  border: 1px solid #e7edf4;
+  border: 1px solid var(--color-surface-3, #e7edf4);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .datepicker__calendar__selectDate__select__input__disable.input--pressed {
-  border: 1px solid #b9cbd3;
+  border: 1px solid var(--color-content-disable, #505f79);
   box-sizing: border-box;
   border-radius: 8px;
-  -webkit-box-shadow: 0 0 0 2px #e7edf4;
-  box-shadow: 0 0 0 2px #e7edf4;
+  -webkit-box-shadow: 0 0 0 2px var(--color-surface-3, #e7edf4);
+  box-shadow: 0 0 0 2px var(--color-surface-3, #e7edf4);
 }
 .datepicker__calendar__selectDate__select__input__disable .input__icon {
-  color: #b9cbd3;
-  background-color: #f8fbfb;
+  color: var(--color-content-disable, #505f79);
+  background-color: var(--color-surface-3, #e7edf4);
 }
 .datepicker__calendar__selectDate__select__input__disable .input__container__label {
-  color: #b9cbd3;
+  color: var(--color-content-disable, #505f79);
 }
 .datepicker__calendar__selectDate__select__input__disable .input__container__label--pressed {
-  color: #b9cbd3;
+  color: var(--color-content-disable, #505f79);
 }
 .datepicker__calendar__selectDate__select__input__disable .input__container__text {
-  caret-color: #b9cbd3;
-  color: #b9cbd3;
+  caret-color: var(--color-content-disable, #505f79);
+  color: var(--color-content-disable, #505f79);
 }
 .datepicker__calendar__selectDate__select__input .icon-arrow {
-  color: #8ca0b3;
+  color: var(--color-content-ghost, #6e7b91);
   display: flex;
 }
 .datepicker__calendar__selectDate__select__options {
-  background: #f8fbfb;
+  background: var(--color-surface-1, #ffffff);
   width: 100%;
   max-height: 250px;
   position: absolute;
@@ -582,7 +583,7 @@
 }
 .datepicker__calendar__selectDate__icon {
   cursor: pointer;
-  color: #505f79;
+  color: var(--color-content-disable, #505f79);
 }
 .datepicker__calendar__selectDate .arrow-left {
   padding-left: 8px;
@@ -608,7 +609,7 @@
   width: 40px;
   height: 40px;
   text-align: center;
-  color: #8ca0b3;
+  color: var(--color-content-ghost, #6e7b91);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -640,7 +641,8 @@
   content: "";
   position: absolute;
   inset: 4px 0px;
-  background-color: #e8f2ff;
+  background-color: var(--color-primary, #3f7de8);
+  opacity: 0.25;
 }
 .datepicker__calendar__car__slide__box__day__start:before {
   inset: 4px 0;
@@ -660,34 +662,32 @@
   justify-content: center;
   align-items: center;
   border-radius: 100%;
-  color: #233049;
+  color: var(--color-content-default, #202c44);
   border: 1px solid transparent;
   cursor: pointer;
 }
 .datepicker__calendar__car__slide__box__day__typo:hover {
-  background-color: #ffffff;
-  color: #3f7de8;
-  border-color: #3f7de8;
+  background-color: var(--color-surface-1, #ffffff);
+  color: var(--color-primary, #3f7de8);
+  border-color: var(--color-primary, #3f7de8);
 }
 .datepicker__calendar__car__slide__box__day__current {
-  background-color: #ffffff;
-  color: #3f7de8;
-  border-color: #3f7de8;
+  background-color: var(--color-surface-1, #ffffff);
+  color: var(--color-primary, #3f7de8);
+  border-color: var(--color-primary, #3f7de8);
 }
 .datepicker__calendar__car__slide__box__day__selected {
-  background-color: #3f7de8;
-  color: #ffffff;
-  border-color: #3f7de8;
+  background-color: var(--color-primary, #3f7de8);
+  color: var(--color-content-bright, #fff);
 }
 .datepicker__calendar__car__slide__box__day__selected:hover {
-  background-color: #3f7de8;
-  color: #ffffff;
-  border-color: #3f7de8;
+  background-color: var(--color-primary, #3f7de8);
+  color: var(--color-content-bright, #fff);
 }
 .datepicker__calendar__car__slide__box__day__disable {
   pointer-events: none;
   background-color: transparent;
-  color: #8ca0b3;
+  color: var(--color-content-ghost, #6e7b91);
 }
 .datepicker__calendar__car .animate__prev {
   animation-name: animationPrev;
@@ -705,7 +705,7 @@
 .period .datepicker__calendar__selectDate__futureMonth {
   padding-left: 80px;
   text-align: center;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
 }
 .period .datepicker__calendar__week {
   width: 100%;

package/dist/collection/components/list/list.css

@@ -27,27 +27,35 @@
   align-items: center;
   padding: 10px 16px;
 }
+.list_item .input_list {
+  position: relative;
+}
 .list_item .avatar-item {
+  position: relative;
   display: block;
 }
 .list_item .icon-item {
-  color: #505f79;
+  position: relative;
+  color: var(--color-content-default, #202c44);
 }
 .list_item .grow-up {
+  position: relative;
   flex-grow: 2;
 }
 .list_item .content-item {
+  position: relative;
   display: flex;
   gap: 2px;
   flex-direction: column;
 }
 .list_item .content-item .title-item {
-  color: #0a0f1a;
+  color: var(--color-content-default, #202c44);
 }
 .list_item .content-item .subtitle-item {
-  color: #6e7b91;
+  color: var(--color-content-default, #202c44);
 }
 .list_item .content-area {
+  position: relative;
   flex-grow: 2;
 }
 .list_item .content-area .internal-chips,
@@ -56,17 +64,26 @@
   flex-direction: row;
   gap: 8px;
 }
+.list_item .action-area {
+  position: relative;
+}
 .list_item .action-area .internal-actions-buttons,
 .list_item .action-area ::slotted(*) {
   display: flex;
   flex-direction: row;
-  color: #505f79;
+  color: var(--color-content-default, #202c44);
 }
 
 .clickable {
+  position: relative;
   cursor: pointer;
 }
-.clickable:hover {
-  background-color: #f3f6fa;
+.clickable:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.clickable:hover:before {
+  background-color: var(--color-surface-2, #f3f6fa);
   mix-blend-mode: multiply;
 }

package/dist/collection/components/loading-bar/loading-bar.css

@@ -28,7 +28,7 @@
   box-sizing: border-box;
   position: relative;
   border-radius: 32px;
-  border: 1px solid #6e7b91;
+  border: 1px solid var(--color-content-disable, #505f79);
   margin-bottom: 8px;
 }
 .loading_bar.size_small {
@@ -52,7 +52,7 @@
 .loading_bar .bar_behind .loading {
   position: absolute;
   height: 100%;
-  background-color: #3f7de8;
+  background-color: var(--color-brand, #3f7de8);
   transition: all 0.3s;
   transition-property: all;
   transition-duration: 0.3s;
@@ -78,7 +78,7 @@
 .typo_loading {
   padding-left: 8px;
   padding-right: 8px;
-  color: #212a3c;
+  color: var(--color-content-default, #202c44);
 }
 
 @keyframes load {

package/dist/collection/components/loading-page/loading-page.css

@@ -36,7 +36,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: #233049;
+  background-color: var(--color-surface-4, #202c44);
   opacity: 0.65;
   mix-blend-mode: multiply;
 }
@@ -45,7 +45,7 @@
   animation: growUp 0.8s ease-in-out infinite;
   width: 116px;
   height: 128px;
-  color: #ffffff;
+  color: var(--color-surface-3, #e7edf4);
 }
 
 @keyframes growUp {

package/dist/collection/components/loading-spinner/loading-spinner.css

@@ -34,7 +34,7 @@
 
 .spinner_background {
   border-radius: 50%;
-  border: 2px solid #d2dfe6;
+  border: 2px solid var(--color-surface-3, #e7edf4);
 }
 .spinner_background_extra-small {
   border-width: 2px;
@@ -55,10 +55,10 @@
   box-sizing: border-box;
 }
 .spinner_background_main {
-  border-color: #d2dfe6;
+  border-color: var(--color-surface-3, #e7edf4);
 }
 .spinner_background_light {
-  border-color: #0a0f1a;
+  border-color: var(--color-content-default, #202c44);
   mix-blend-mode: multiply;
   opacity: 0.32;
 }
@@ -80,10 +80,10 @@
   height: 64px;
 }
 .spinner_loading_main {
-  color: #3f7de8;
+  color: var(--color-brand, #3f7de8);
 }
 .spinner_loading_light {
-  color: #ffffff;
+  color: var(--color-surface-3, #e7edf4);
 }
 
 @keyframes rotate {

package/dist/collection/components/pagination/pagination.css

@@ -43,21 +43,22 @@
   width: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: #ffffff;
+  background: var(--color-surface-1, #ffffff);
   border-radius: 8px;
-  border: 1px solid #d2dfe6;
+  border: 1px solid var(--color-surface-3, #e7edf4);
   box-sizing: border-box;
 }
 :host .actions .select_input bds-typo {
   min-width: 28px;
+  color: var(--color-content-default, #202c44);
 }
 :host .actions .select_input:hover {
-  border-color: #3f7de8;
+  border-color: var(--color-brand, #3f7de8);
 }
 :host .actions .select_options {
   position: absolute;
   width: 100%;
-  background-color: #ffffff;
+  background-color: var(--color-surface-1, #ffffff);
   border-radius: 8px;
   z-index: 2;
   margin-top: 4px;
@@ -87,6 +88,5 @@
   box-sizing: border-box;
 }
 :host .actions .select_options li:hover {
-  color: #3f7de8;
-  background-color: #f3f6fa;
+  background-color: var(--color-surface-2, #f3f6fa);
 }

package/dist/collection/components/progress-bar/progress-bar.css

@@ -28,7 +28,7 @@
   box-sizing: border-box;
   position: relative;
   border-radius: 32px;
-  border: 1px solid #6e7b91;
+  border: 1px solid var(--color-content-disable, #505f79);
   margin-bottom: 4px;
 }
 .progress_bar.size_small {
@@ -60,16 +60,16 @@
   overflow: hidden;
 }
 .progress_bar .bar_behind .progress.color_default {
-  background-color: #3f7de8;
+  background-color: var(--color-brand, #3f7de8);
 }
 .progress_bar .bar_behind .progress.color_positive {
-  background-color: #008767;
+  background-color: var(--color-success, #90e6bc);
 }
 .progress_bar .bar_behind .progress.color_information {
-  background-color: #ff6e1d;
+  background-color: var(--color-warning, #fff6a8);
 }
 .progress_bar .bar_behind .progress.color_warning {
-  background-color: #ff4c4c;
+  background-color: var(--color-error, #ffa5a5);
 }
 .progress_bar .bar_behind .progress .loading {
   position: absolute;
@@ -87,7 +87,7 @@
 }
 
 .typo_progress {
-  color: #212a3c;
+  color: var(--color-content-default, #202c44);
 }
 
 @keyframes load {

package/dist/collection/components/selects/select.css

@@ -37,11 +37,11 @@
   box-shadow: inherit;
 }
 .element_input input::placeholder {
-  color: #b9cbd3;
+  color: var(--color-content-ghost, #6e7b91);
   opacity: 1;
 }
 .element_input input::-webkit-input-placeholder {
-  color: #b9cbd3;
+  color: var(--color-content-ghost, #6e7b91);
   opacity: 1;
 }
 
@@ -54,105 +54,105 @@
   width: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: #ffffff;
+  background: var(--color-surface-1, #ffffff);
 }
 .input--state-primary {
-  border: 1px solid #d2dfe6;
+  border: 1px solid var(--color-surface-3, #e7edf4);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .input--state-primary:hover {
-  border: 1px solid #3f7de8;
+  border: 1px solid var(--color-primary, #3f7de8);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .input--state-primary.input--pressed {
-  border: 1px solid #3f7de8;
+  border: 1px solid var(--color-primary, #3f7de8);
   box-sizing: border-box;
   border-radius: 8px;
-  -webkit-box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
-  box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
+  -webkit-box-shadow: 0 0 0 2px var(--color-info, #80e3eb);
+  box-shadow: 0 0 0 2px var(--color-info, #80e3eb);
 }
 .input--state-primary .input__icon {
-  color: #3f7de8;
-  background-color: #e8f2ff;
+  color: var(--color-primary, #3f7de8);
+  background-color: var(--color-surface-3, #e7edf4);
 }
 .input--state-primary .input__container__label {
-  color: #8ca0b3;
+  color: var(--color-content-default, #202c44);
 }
 .input--state-primary .input__container__label--pressed {
-  color: #3f7de8;
+  color: var(--color-primary, #3f7de8);
 }
 .input--state-primary .input__container__text {
-  caret-color: #3f7de8;
-  color: #202c44;
+  caret-color: var(--color-primary, #3f7de8);
+  color: var(--color-content-default, #202c44);
 }
 .input--state-danger {
-  border: 1px solid #ff4c4c;
+  border: 1px solid var(--color-delete, #ff4c4c);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .input--state-danger:hover {
-  border: 1px solid #ff4c4c;
+  border: 1px solid var(--color-delete, #ff4c4c);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .input--state-danger.input--pressed {
-  border: 1px solid #ff4c4c;
+  border: 1px solid var(--color-delete, #ff4c4c);
   box-sizing: border-box;
   border-radius: 8px;
-  -webkit-box-shadow: 0 0 0 2px #ffa5a5;
-  box-shadow: 0 0 0 2px #ffa5a5;
+  -webkit-box-shadow: 0 0 0 2px var(--color-error, #ffa5a5);
+  box-shadow: 0 0 0 2px var(--color-error, #ffa5a5);
 }
 .input--state-danger .input__icon {
-  color: #ff4c4c;
-  background-color: #ffa5a5;
+  color: var(--color-delete, #ff4c4c);
+  background-color: var(--color-error, #ffa5a5);
 }
 .input--state-danger .input__container__label {
-  color: #8ca0b3;
+  color: var(--color-delete, #ff4c4c);
 }
 .input--state-danger .input__container__label--pressed {
-  color: #ff4c4c;
+  color: var(--color-delete, #ff4c4c);
 }
 .input--state-danger .input__container__text {
-  caret-color: #ff4c4c;
-  color: #202c44;
+  caret-color: var(--color-delete, #ff4c4c);
+  color: var(--color-delete, #ff4c4c);
 }
 .input--state-disabled {
   cursor: not-allowed;
-  border: 1px solid #e7edf4;
+  border: 1px solid var(--color-surface-3, #e7edf4);
   box-sizing: border-box;
   border-radius: 8px;
-  background: #f3f6fa;
+  background: var(--color-surface-3, #e7edf4);
 }
 .input--state-disabled:hover {
-  border: 1px solid #b9cbd3;
+  border: 1px solid var(--color-content-disable, #505f79);
   box-sizing: border-box;
   border-radius: 8px;
-  border: 1px solid #e7edf4;
+  border: 1px solid var(--color-surface-3, #e7edf4);
   box-sizing: border-box;
   border-radius: 8px;
 }
 .input--state-disabled.input--pressed {
-  border: 1px solid #b9cbd3;
+  border: 1px solid var(--color-content-disable, #505f79);
   box-sizing: border-box;
   border-radius: 8px;
-  -webkit-box-shadow: 0 0 0 2px #e7edf4;
-  box-shadow: 0 0 0 2px #e7edf4;
+  -webkit-box-shadow: 0 0 0 2px var(--color-surface-3, #e7edf4);
+  box-shadow: 0 0 0 2px var(--color-surface-3, #e7edf4);
 }
 .input--state-disabled .input__icon {
-  color: #b9cbd3;
-  background-color: #f8fbfb;
+  color: var(--color-content-disable, #505f79);
+  background-color: var(--color-surface-3, #e7edf4);
 }
 .input--state-disabled .input__container__label {
-  color: #b9cbd3;
+  color: var(--color-content-disable, #505f79);
 }
 .input--state-disabled .input__container__label--pressed {
-  color: #b9cbd3;
+  color: var(--color-content-disable, #505f79);
 }
 .input--state-disabled .input__container__text {
-  caret-color: #b9cbd3;
-  color: #b9cbd3;
+  caret-color: var(--color-content-disable, #505f79);
+  color: var(--color-content-disable, #505f79);
 }
 .input--label {
   padding: 7px 4px 8px 12px;
@@ -269,7 +269,7 @@
   height: 20px;
   margin: 3.7px 2.5px;
   transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  color: #8ca0b3;
+  color: var(--color-content-ghost, #6e7b91);
   word-break: break-word;
   height: auto;
   min-height: 20px;
@@ -285,7 +285,7 @@
   padding-top: 2px;
 }
 .input__message--danger {
-  color: #ff4c4c;
+  color: var(--color-delete, #ff4c4c);
 }
 
 .select {
@@ -293,11 +293,11 @@
   outline: none;
 }
 .select__icon {
-  color: #8ca0b3;
+  color: var(--color-content-ghost, #6e7b91);
   display: flex;
 }
 .select__options {
-  background: #f8fbfb;
+  background: var(--color-surface-2, #f3f6fa);
   width: 100%;
   max-height: 250px;
   position: absolute;

package/dist/collection/components/sidebar/sidebar.css

@@ -24,7 +24,7 @@
   width: 100%;
   height: 100vh;
   box-shadow: 0px 4px 10px rgba(51, 51, 51, 0.3);
-  background-color: rgba(32, 44, 68, 0.3);
+  background-color: rgba(0, 0, 0, 0.7);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease-in-out;
@@ -57,7 +57,7 @@
   transition: all 0.5s ease-in-out;
   display: flex;
   flex-direction: column;
-  background-color: #f3f6fa;
+  background-color: var(--color-surface-2, #f3f6fa);
   z-index: 90000;
   flex-shrink: 0;
 }
@@ -80,7 +80,7 @@
   display: flex;
   align-items: center;
   position: relative;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
 }
 .sidebar_dialog .sidebar .header .content ::slotted(*) {
   width: 100%;
@@ -93,7 +93,7 @@
   transition: height 0.5s, all 0.3s;
   z-index: 1;
   cursor: pointer;
-  color: #505f79;
+  color: var(--color-content-default, #202c44);
 }
 .sidebar_dialog .sidebar .body {
   position: relative;