@useblu/ocean-core 1.57.0 → 1.58.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.58.0](https://github.com/ocean-ds/ocean-web/compare/v1.57.1...v1.58.0) (2024-05-15)
+
+### Features
+
+- alert button ([#1099](https://github.com/ocean-ds/ocean-web/issues/1099)) ([425e015](https://github.com/ocean-ds/ocean-web/commit/425e01503db7be486b9dbb0d43c631a891aca799))
+
+## [1.57.1](https://github.com/ocean-ds/ocean-web/compare/v1.57.0...v1.57.1) (2024-04-18)
+
+**Note:** Version bump only for package @useblu/ocean-core
+
 # [1.57.0](https://github.com/ocean-ds/ocean-web/compare/v1.56.0...v1.57.0) (2024-04-18)
 
 ### Features

package/ocean.css

@@ -1117,7 +1117,7 @@
 .ods-file-uploader__trigger {
   align-items: center;
   background: white;
-  border: 1px dashed #d8dae8;
+  border: 1px dashed #ced1e1;
   border-radius: 8px;
   box-sizing: border-box;
   display: flex;
@@ -1224,7 +1224,7 @@
   -webkit-animation: ods-file-animation 0.2s linear;
           animation: ods-file-animation 0.2s linear;
   background: white;
-  border: 1px solid #d8dae8;
+  border: 1px solid #ced1e1;
   border-radius: 8px;
   box-sizing: border-box;
   display: flex;
@@ -1246,10 +1246,10 @@
   border: 1px solid #b8c3ff;
 }
 .ods-file-uploader__file--idle {
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
 }
 .ods-file-uploader__file--loading {
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
 }
 .ods-file-uploader__file--idle .ods-file-uploader__file-status {
   color: #b8c3ff;
@@ -1323,7 +1323,7 @@
 .ods-input {
   align-items: center;
   background-color: white;
-  border: 1px solid #d8dae8;
+  border: 1px solid #ced1e1;
   border-radius: 4px;
   box-sizing: border-box;
   display: flex;
@@ -1344,15 +1344,15 @@
   width: 100%;
 }
 .ods-input input::-moz-placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
   font-weight: 400;
 }
 .ods-input input:-ms-input-placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
   font-weight: 400;
 }
 .ods-input input::placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
   font-weight: 400;
 }
 .ods-input__number-controls {
@@ -1372,8 +1372,8 @@
   border-color: #f5456e;
 }
 .ods-input--disabled {
-  background-color: #ebecf5;
-  border-color: #ebecf5;
+  background-color: #e0e2ee;
+  border-color: #e0e2ee;
   cursor: not-allowed;
 }
 .ods-input--disabled input {
@@ -1391,7 +1391,7 @@
   padding-right: 16px;
 }
 .ods-input__adornment--placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
 }
 .ods-input__adornment input {
   padding: 0 4px;
@@ -1437,7 +1437,7 @@
 
 .ods-textarea {
   background-color: white;
-  border: 1px solid #d8dae8;
+  border: 1px solid #ced1e1;
   border-radius: 4px;
   box-sizing: border-box;
   color: #393b47;
@@ -1451,25 +1451,25 @@
   width: 100%;
 }
 .ods-textarea::-moz-placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
 }
 .ods-textarea:-ms-input-placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
 }
 .ods-textarea::placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
 }
 .ods-textarea:hover, .ods-textarea:focus, .ods-textarea:active, .ods-textarea:focus-within {
   border: 2px solid #5872f5;
 }
 .ods-textarea:disabled {
-  background-color: #ebecf5;
-  border-color: #ebecf5;
+  background-color: #e0e2ee;
+  border-color: #e0e2ee;
   color: #aaadc0;
   cursor: not-allowed;
 }
 .ods-textarea:disabled:active {
-  border-color: #ebecf5;
+  border-color: #e0e2ee;
 }
 .ods-textarea--filled {
   border: 1px solid #b8c3ff;
@@ -1548,16 +1548,16 @@
   border-color: #13bdbd;
 }
 .ods-checkbox:checked:disabled ~ .ods-checkbox__checkmark {
-  background-color: #ebecf5;
-  border-color: #ebecf5;
+  background-color: #e0e2ee;
+  border-color: #e0e2ee;
 }
 .ods-checkbox:disabled ~ .ods-checkbox__checkmark, .ods-checkbox:disabled ~ .ods-checkbox__label {
-  color: #d8dae8;
+  color: #ced1e1;
   cursor: not-allowed;
 }
 .ods-checkbox:disabled:not(:checked) ~ .ods-checkbox__checkmark {
   background-color: white;
-  border-color: #ebecf5;
+  border-color: #e0e2ee;
 }
 
 .ods-radio {
@@ -1597,14 +1597,14 @@
   border-color: #13bdbd;
 }
 .ods-radio:checked:disabled ~ .ods-radio__checkmark {
-  border-color: #d8dae8;
+  border-color: #ced1e1;
 }
 .ods-radio:disabled ~ .ods-radio__checkmark, .ods-radio:disabled ~ .ods-radio__label {
-  color: #d8dae8;
+  color: #ced1e1;
   cursor: not-allowed;
 }
 .ods-radio:disabled:not(:checked) ~ .ods-radio__checkmark {
-  border-color: #d8dae8;
+  border-color: #ced1e1;
 }
 
 .ods-switch {
@@ -1655,18 +1655,18 @@
   border-color: #13bdbd;
 }
 .ods-switch:checked:disabled + .ods-switch__slider {
-  background-color: #ebecf5;
-  border-color: #ebecf5;
+  background-color: #e0e2ee;
+  border-color: #e0e2ee;
 }
 .ods-switch:disabled + .ods-switch__slider {
   cursor: not-allowed;
 }
 .ods-switch:disabled:not(:checked) + .ods-switch__slider {
   background-color: white;
-  border-color: #ebecf5;
+  border-color: #e0e2ee;
 }
 .ods-switch:disabled:not(:checked) + .ods-switch__slider::before {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
 }
 
 .ods-select__root {
@@ -1676,7 +1676,7 @@
 .ods-select__control {
   align-items: center;
   background-color: white;
-  border: solid 1px #d8dae8;
+  border: solid 1px #ced1e1;
   border-radius: 4px;
   color: #393b47;
   cursor: pointer;
@@ -1698,8 +1698,8 @@
   padding-right: 15px;
 }
 .ods-select__control:disabled {
-  background-color: #ebecf5;
-  border-color: #ebecf5;
+  background-color: #e0e2ee;
+  border-color: #e0e2ee;
   color: #aaadc0;
   cursor: not-allowed;
 }
@@ -1718,7 +1718,7 @@
   white-space: nowrap;
 }
 .ods-select__value--empty {
-  color: #d8dae8;
+  color: #ced1e1;
 }
 .ods-select__arrow {
   display: flex;
@@ -1739,7 +1739,7 @@
 }
 .ods-select__listbox {
   background-color: white;
-  border: solid 1px #d8dae8;
+  border: solid 1px #ced1e1;
   border-radius: 4px;
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   list-style: none;
@@ -1786,18 +1786,24 @@
 }
 
 .ods-alert {
-  align-items: center;
+  align-items: flex-start;
   background-color: #f3f5fe;
   border-radius: 8px;
   color: #67697a;
   display: flex;
+  flex-direction: column;
   font-family: "Nunito Sans";
   font-size: 12px;
   font-weight: 400;
-  justify-content: left;
+  justify-content: center;
   line-height: 1.5;
   padding: 16px;
 }
+@media (min-width: 576px) {
+  .ods-alert__button--mobile {
+    display: none;
+  }
+}
 .ods-alert--error {
   background-color: #fff1f4;
 }
@@ -1807,6 +1813,12 @@
 .ods-alert--error .ods-alert__title {
   color: #f5456e;
 }
+.ods-alert--error .ods-btn {
+  background-color: #f5456e;
+}
+.ods-alert--error .ods-link {
+  color: #f5456e;
+}
 .ods-alert--warning {
   background-color: #fff7f0;
 }
@@ -1816,6 +1828,12 @@
 .ods-alert--warning .ods-alert__title {
   color: #ff8a14;
 }
+.ods-alert--warning .ods-btn {
+  background-color: #ff8a14;
+}
+.ods-alert--warning .ods-link {
+  color: #ff8a14;
+}
 .ods-alert--success {
   background-color: #f2fdf5;
 }
@@ -1825,8 +1843,14 @@
 .ods-alert--success .ods-alert__title {
   color: #2da94f;
 }
-.ods-alert--has-header {
-  align-items: flex-start;
+.ods-alert--success .ods-btn {
+  background-color: #2da94f;
+}
+.ods-alert--success .ods-link {
+  color: #2da94f;
+}
+.ods-alert__text {
+  display: flex;
   flex-direction: column;
 }
 .ods-alert__icon {
@@ -1834,12 +1858,26 @@
   min-width: 24px;
   stroke: #5872f5;
 }
+@media (max-width: 575.98px) {
+  .ods-alert__button {
+    display: none;
+  }
+}
+.ods-alert__button--mobile {
+  margin-top: 8px;
+}
+.ods-alert__button .ods-btn {
+  margin-left: 16px;
+  min-width: 0;
+}
 .ods-alert__header {
   align-items: center;
   display: flex;
-  margin: 0 0 8px 0;
   width: 100%;
 }
+.ods-alert__header--margin {
+  margin: 0 0 8px 0;
+}
 .ods-alert__title {
   color: #5872f5;
   font-size: 14px;
@@ -1974,10 +2012,10 @@
   color: #0025e0;
 }
 .ods-btn--secondary:hover {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
 }
 .ods-btn--secondary:focus {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
 }
 .ods-btn--secondary:active {
   background-color: #aaadc0;
@@ -1993,7 +2031,7 @@
   background-color: #f3f5fe;
 }
 .ods-btn--secondary-critical:active {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
 }
 .ods-btn--text, .ods-btn--text-critical {
   background-color: transparent;
@@ -2005,7 +2043,7 @@
   background-color: #f3f5fe;
 }
 .ods-btn--text:active, .ods-btn--text-critical:active {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
 }
 .ods-btn--text {
   color: #0025e0;
@@ -2068,7 +2106,7 @@
   visibility: hidden;
 }
 .ods-btn:disabled, .ods-btn:disabled .ods-btn:hover {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
   color: #aaadc0;
   cursor: not-allowed;
 }
@@ -2155,7 +2193,7 @@
 
 .slick-next {
   background: white;
-  border: 1px solid #d8dae8;
+  border: 1px solid #ced1e1;
   border-radius: 100%;
   color: #0025e0;
   font-size: 0;
@@ -2173,7 +2211,7 @@
 
 .slick-prev {
   background: white;
-  border: 1px solid #d8dae8;
+  border: 1px solid #ced1e1;
   border-radius: 100%;
   color: #0025e0;
   font-size: 0;
@@ -2200,7 +2238,7 @@
 
 .slick-prev:active,
 .slick-next:active {
-  background: #ebecf5;
+  background: #e0e2ee;
 }
 
 .slick-prev::before,
@@ -2269,7 +2307,7 @@
 
 .ods-carousel-dots li button::before {
   align-items: center;
-  background: #d8dae8;
+  background: #ced1e1;
   border-radius: 16px;
   content: " ";
   display: flex;
@@ -2289,7 +2327,7 @@
 
 .ods-divider {
   border: 0;
-  border-top: 1px solid #ebecf5;
+  border-top: 1px solid #e0e2ee;
   margin: 0;
 }
 
@@ -2312,7 +2350,7 @@
   color: #0025e0;
 }
 .ods-icon-btn:active {
-  background: #ebecf5;
+  background: #e0e2ee;
 }
 .ods-icon-btn--sm {
   font-size: 16px;
@@ -2383,13 +2421,13 @@
 
 .ods-list {
   background: white;
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
   border-radius: 8px;
   box-sizing: border-box;
   overflow: hidden;
 }
 .ods-list .ods-transaction-list-item:not(:last-of-type) {
-  border-bottom: 1px solid #ebecf5;
+  border-bottom: 1px solid #e0e2ee;
 }
 .ods-list .ods-transaction-list-item__sub-itens .ods-transaction-list-item {
   border: 0;
@@ -2423,13 +2461,13 @@
   background-color: #f3f5fe;
 }
 .ods-transaction-list-item:hover .ods-transaction-list-item__icon, .ods-transaction-list-item:focus .ods-transaction-list-item__icon {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
 }
 .ods-transaction-list-item:active {
-  background-color: #d8dae8;
+  background-color: #ced1e1;
 }
 .ods-transaction-list-item:active .ods-transaction-list-item__icon {
-  background-color: #ebecf5;
+  background-color: #e0e2ee;
 }
 .ods-transaction-list-item .ods-transaction-list-item__sub-itens .ods-transaction-list-item {
   background-color: transparent;
@@ -2749,7 +2787,7 @@
 .ods-search {
   align-items: center;
   background-color: white;
-  border: 1px solid #d8dae8;
+  border: 1px solid #ced1e1;
   border-radius: 4px;
   display: flex;
   height: 46px;
@@ -2769,15 +2807,15 @@
   width: 100%;
 }
 .ods-search input::-moz-placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
   font-weight: 400;
 }
 .ods-search input:-ms-input-placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
   font-weight: 400;
 }
 .ods-search input::placeholder {
-  color: #d8dae8;
+  color: #ced1e1;
   font-weight: 400;
 }
 .ods-search:hover, .ods-search:focus, .ods-search:active, .ods-search:focus-within {
@@ -2787,8 +2825,8 @@
   border: 1px solid #b8c3ff;
 }
 .ods-search--disabled {
-  background-color: #ebecf5;
-  border-color: #ebecf5;
+  background-color: #e0e2ee;
+  border-color: #e0e2ee;
   cursor: not-allowed;
 }
 .ods-search--disabled input {
@@ -2796,7 +2834,7 @@
   cursor: not-allowed;
 }
 .ods-search--disabled:hover, .ods-search--disabled:focus, .ods-search--disabled:active {
-  border: #ebecf5;
+  border: #e0e2ee;
 }
 .ods-search__adornment {
   line-height: 0;
@@ -3270,7 +3308,7 @@
 .ods-cross-sell-card__content {
   align-items: center;
   background-color: #0025e0;
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
   border-bottom: 0;
   border-radius: 8px 8px 0 0;
   display: flex;
@@ -3320,7 +3358,7 @@
 .ods-cross-sell-card__cta {
   align-items: center;
   background: white;
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
   border-radius: 0 0 8px 8px;
   border-top: 0;
   color: #0025e0;
@@ -3340,7 +3378,7 @@
   cursor: pointer;
 }
 .ods-cross-sell-card__cta:active {
-  background: #ebecf5;
+  background: #e0e2ee;
 }
 .ods-cross-sell-card__cta:focus-visible {
   outline: #0025e0 auto 1px;
@@ -3416,7 +3454,7 @@
 }
 .ods-date__calendar {
   background-color: white;
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
   border-radius: 8px;
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   box-sizing: border-box;
@@ -3582,7 +3620,7 @@
   color: #0025e0;
 }
 .ods-date__disabled {
-  color: #d8dae8;
+  color: #ced1e1;
 }
 .ods-date__selected {
   background-color: rgba(176, 245, 245, 0.24);
@@ -3736,7 +3774,7 @@
   width: 100%;
 }
 .ods-chart__legend__row:not(:last-child) {
-  border-bottom: 1px solid #ebecf5;
+  border-bottom: 1px solid #e0e2ee;
 }
 .ods-chart__legend__row__description {
   align-items: center;
@@ -3912,8 +3950,8 @@
           animation-name: moveInDown, moveInDownBack;
   -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
           animation-timing-function: ease-out forwards, ease-out forwards;
-  right: 40px;
   top: 40px;
+  right: 40px;
 }
 .ods-snackbar__top-right-action {
   -webkit-animation-delay: 0s, 9.9s;
@@ -3924,8 +3962,8 @@
           animation-name: moveInDown, moveInDownBack;
   -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
           animation-timing-function: ease-out forwards, ease-out forwards;
-  right: 40px;
   top: 40px;
+  right: 40px;
 }
 .ods-snackbar__top-left-default {
   -webkit-animation-delay: 0s, 3.9s;
@@ -3936,8 +3974,8 @@
           animation-name: moveInDown, moveInDownBack;
   -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
           animation-timing-function: ease-out forwards, ease-out forwards;
-  left: 40px;
   top: 40px;
+  left: 40px;
 }
 .ods-snackbar__top-left-action {
   -webkit-animation-delay: 0s, 9.9s;
@@ -3948,8 +3986,8 @@
           animation-name: moveInDown, moveInDownBack;
   -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
           animation-timing-function: ease-out forwards, ease-out forwards;
-  left: 40px;
   top: 40px;
+  left: 40px;
 }
 .ods-snackbar__bottom-right-default {
   -webkit-animation-delay: 0s, 3.9s;
@@ -4185,7 +4223,7 @@
 .ods-shortcut {
   align-items: flex-start;
   background-color: white;
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
   border-radius: 8px;
   box-sizing: border-box;
   cursor: pointer;
@@ -4279,7 +4317,7 @@
 
 .ods-card-list-item {
   align-items: center;
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
   border-radius: 8px;
   box-sizing: border-box;
   cursor: pointer;
@@ -4360,7 +4398,7 @@
 }
 .ods-card-list-item--disabled .ods-card-list-item__leading-icon,
 .ods-card-list-item--disabled .ods-card-list-item__action {
-  color: #d8dae8;
+  color: #ced1e1;
 }
 .ods-card-list-item--size-small .ods-card-list-item__content__title {
   font-size: 14px;
@@ -4393,7 +4431,7 @@
   padding: 8px 16px;
 }
 .ods-chips__button:hover, .ods-chips__button:focus {
-  background: #ebecf5;
+  background: #e0e2ee;
 }
 .ods-chips__button:active {
   background: #0025e0;
@@ -4436,7 +4474,7 @@
 }
 .ods-chips__options {
   background: white;
-  border: 1px solid #ebecf5;
+  border: 1px solid #e0e2ee;
   border-radius: 4px;
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   display: flex;
@@ -4499,7 +4537,7 @@
   color: #0025e0;
 }
 .ods-chips__options--footer {
-  border-top: 1px solid #ebecf5;
+  border-top: 1px solid #e0e2ee;
   display: flex;
   flex-direction: row;
   justify-content: space-between;