@useblu/ocean-core 1.55.0 → 1.57.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.57.0](https://github.com/ocean-ds/ocean-web/compare/v1.56.0...v1.57.0) (2024-04-18)
+
+### Features
+
+- create unordered list component ([#1097](https://github.com/ocean-ds/ocean-web/issues/1097)) ([d590bd6](https://github.com/ocean-ds/ocean-web/commit/d590bd6f9ccd95d8549c4f0e07bf12a695b61036))
+
 # [1.55.0](https://github.com/ocean-ds/ocean-web/compare/v1.54.1...v1.55.0) (2024-03-27)
 
 ### Features

package/ocean.css

@@ -1074,7 +1074,7 @@
   left: -5px;
 }
 .ods-form-control__helper-text {
-  color: #b6b9cc;
+  color: #aaadc0;
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
@@ -1084,7 +1084,7 @@
   color: #f5456e;
 }
 .ods-form-control__helper-text--disabled {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 
 .ods-form-label {
@@ -1097,7 +1097,7 @@
   margin-bottom: 8px;
 }
 .ods-form-label--disabled {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 
 .ods-file-uploader {
@@ -1128,7 +1128,7 @@
   width: 100%;
 }
 .ods-file-uploader__trigger--drag {
-  background: #f7f9ff;
+  background: #f3f5fe;
   border: 1px dashed #0025e0;
 }
 .ods-file-uploader--error .ods-file-uploader__trigger {
@@ -1179,7 +1179,7 @@
 }
 .ods-file-uploader__subtitle {
   align-items: center;
-  color: #b6b9cc;
+  color: #aaadc0;
   display: flex;
   font-size: 12px;
   font-weight: 400;
@@ -1273,7 +1273,7 @@
   justify-content: center;
 }
 .ods-file-uploader__file-actions .ods-icon-btn {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-file-uploader__file-actions .ods-icon-btn:hover {
   color: #0025e0;
@@ -1377,7 +1377,7 @@
   cursor: not-allowed;
 }
 .ods-input--disabled input {
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: not-allowed;
 }
 .ods-input--disabled:hover, .ods-input--disabled:focus, .ods-input--disabled:active {
@@ -1465,7 +1465,7 @@
 .ods-textarea:disabled {
   background-color: #ebecf5;
   border-color: #ebecf5;
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: not-allowed;
 }
 .ods-textarea:disabled:active {
@@ -1492,8 +1492,8 @@
           user-select: none;
 }
 .ods-checkbox__root:hover .ods-checkbox__checkmark {
-  background-color: #f7f9ff;
-  border-color: #b6b9cc;
+  background-color: #f3f5fe;
+  border-color: #aaadc0;
 }
 .ods-checkbox__label {
   cursor: pointer;
@@ -1501,7 +1501,7 @@
 }
 .ods-checkbox__checkmark {
   background-color: white;
-  border: solid 1px #b6b9cc;
+  border: solid 1px #aaadc0;
   border-radius: 4px;
   box-sizing: border-box;
   cursor: pointer;
@@ -1574,8 +1574,8 @@
           user-select: none;
 }
 .ods-radio__root:hover .ods-radio__checkmark {
-  background-color: #f7f9ff;
-  border-color: #b6b9cc;
+  background-color: #f3f5fe;
+  border-color: #aaadc0;
 }
 .ods-radio__label {
   cursor: pointer;
@@ -1583,7 +1583,7 @@
 }
 .ods-radio__checkmark {
   background-color: white;
-  border: solid 1px #b6b9cc;
+  border: solid 1px #aaadc0;
   border-radius: 50%;
   box-sizing: border-box;
   cursor: pointer;
@@ -1620,12 +1620,12 @@
   width: 40px;
 }
 .ods-switch__root:hover .ods-switch__slider {
-  background-color: #f7f9ff;
-  border-color: #b6b9cc;
+  background-color: #f3f5fe;
+  border-color: #aaadc0;
 }
 .ods-switch__slider {
   background-color: white;
-  border: solid 1px #b6b9cc;
+  border: solid 1px #aaadc0;
   border-radius: 500px;
   bottom: 0;
   box-sizing: border-box;
@@ -1638,7 +1638,7 @@
   transition: all 0.2s ease;
 }
 .ods-switch__slider::before {
-  background-color: #b6b9cc;
+  background-color: #aaadc0;
   border-radius: 50%;
   content: "";
   display: block;
@@ -1700,7 +1700,7 @@
 .ods-select__control:disabled {
   background-color: #ebecf5;
   border-color: #ebecf5;
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: not-allowed;
 }
 .ods-select__control--filled {
@@ -1731,7 +1731,7 @@
   transform: rotate(0);
 }
 .ods-select__arrow--disabled {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-select__listbox-wrapper {
   position: relative;
@@ -1777,7 +1777,7 @@
   white-space: nowrap;
 }
 .ods-select__option--selected, .ods-select__option:hover, .ods-select__option:focus, .ods-select__option:active {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   color: #0025e0;
   font-weight: 700;
 }
@@ -1787,7 +1787,7 @@
 
 .ods-alert {
   align-items: center;
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   border-radius: 8px;
   color: #67697a;
   display: flex;
@@ -1908,7 +1908,7 @@
   background-color: #ff8a14;
 }
 .ods-badge--neutral .ods-badge__content {
-  background-color: #b6b9cc;
+  background-color: #aaadc0;
 }
 
 .ods-btn {
@@ -1970,7 +1970,7 @@
   background-color: #d31441;
 }
 .ods-btn--secondary {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   color: #0025e0;
 }
 .ods-btn--secondary:hover {
@@ -1980,17 +1980,17 @@
   background-color: #ebecf5;
 }
 .ods-btn--secondary:active {
-  background-color: #b6b9cc;
+  background-color: #aaadc0;
 }
 .ods-btn--secondary-critical {
   background-color: #fff1f4;
   color: #f5456e;
 }
 .ods-btn--secondary-critical:hover {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-btn--secondary-critical:focus {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-btn--secondary-critical:active {
   background-color: #ebecf5;
@@ -1999,10 +1999,10 @@
   background-color: transparent;
 }
 .ods-btn--text:hover, .ods-btn--text-critical:hover {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-btn--text:focus, .ods-btn--text-critical:focus {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-btn--text:active, .ods-btn--text-critical:active {
   background-color: #ebecf5;
@@ -2069,7 +2069,7 @@
 }
 .ods-btn:disabled, .ods-btn:disabled .ods-btn:hover {
   background-color: #ebecf5;
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: not-allowed;
 }
 
@@ -2193,7 +2193,7 @@
 
 .slick-prev:hover,
 .slick-next:hover {
-  background: #f7f9ff;
+  background: #f3f5fe;
   cursor: pointer;
   outline: none;
 }
@@ -2308,7 +2308,7 @@
   width: 48px;
 }
 .ods-icon-btn:hover {
-  background: #f7f9ff;
+  background: #f3f5fe;
   color: #0025e0;
 }
 .ods-icon-btn:active {
@@ -2331,12 +2331,12 @@
   width: 48px;
 }
 .ods-icon-btn--disabled {
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: not-allowed;
 }
 .ods-icon-btn--disabled:hover {
   background-color: inherit;
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 
 .ods-link {
@@ -2397,9 +2397,9 @@
 
 .ods-transaction-list-item__icon {
   align-items: center;
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   border-radius: 40px;
-  color: #b6b9cc;
+  color: #aaadc0;
   display: flex;
   height: 40px;
   justify-content: center;
@@ -2420,7 +2420,7 @@
   width: 100%;
 }
 .ods-transaction-list-item:hover, .ods-transaction-list-item:focus {
-  background-color: #f7f9ff;
+  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;
@@ -2519,7 +2519,7 @@
 }
 
 .ods-transaction-list-item__level3 {
-  color: #b6b9cc;
+  color: #aaadc0;
   font-family: "Nunito Sans";
   font-size: 12px;
   font-weight: 600;
@@ -2554,7 +2554,7 @@
 }
 
 .ods-transaction-list-item__time {
-  color: #b6b9cc;
+  color: #aaadc0;
   font-family: "Nunito Sans";
   font-size: 12px;
   font-weight: 600;
@@ -2583,7 +2583,7 @@
 .ods-modal__header-close {
   background: transparent;
   border: 0;
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: pointer;
   display: flex;
   margin-left: auto;
@@ -2724,7 +2724,7 @@
 
 .ods-sub-header {
   align-items: center;
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
@@ -2792,7 +2792,7 @@
   cursor: not-allowed;
 }
 .ods-search--disabled input {
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: not-allowed;
 }
 .ods-search--disabled:hover, .ods-search--disabled:focus, .ods-search--disabled:active {
@@ -2806,7 +2806,7 @@
   color: #d8dae8;
 }
 .ods-search__clean {
-  color: #b6b9cc;
+  color: #aaadc0;
   margin-right: 4px;
 }
 .ods-search__clean:hover {
@@ -2815,7 +2815,7 @@
 
 .ods-tag {
   align-items: center;
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   border-radius: 16px;
   color: #67697a;
   display: flex;
@@ -2857,16 +2857,16 @@
   color: #2da94f;
 }
 .ods-tag--neutral {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-tag--neutral .ods-tag__icon {
-  fill: #b6b9cc;
+  fill: #aaadc0;
 }
 .ods-tag--neutral .ods-tag__content {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-tag--neutral-02 {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-tag--neutral-02 .ods-tag__icon {
   fill: #5872f5;
@@ -3336,7 +3336,7 @@
   width: 100%;
 }
 .ods-cross-sell-card__cta:hover {
-  background: #f7f9ff;
+  background: #f3f5fe;
   cursor: pointer;
 }
 .ods-cross-sell-card__cta:active {
@@ -3469,7 +3469,7 @@
   top: 0;
 }
 .ods-date__navButtons:hover {
-  background: #f7f9ff;
+  background: #f3f5fe;
 }
 .ods-date__navButtonPrev {
   left: 17px;
@@ -3506,7 +3506,7 @@
   padding: 0 8px;
 }
 .ods-date__headRow {
-  color: #b6b9cc;
+  color: #aaadc0;
   display: grid;
   font-family: "Nunito Sans";
   font-size: 12px;
@@ -3564,7 +3564,7 @@
 }
 .ods-date__day:hover::after {
   align-items: center;
-  border: 1px solid #b6b9cc;
+  border: 1px solid #aaadc0;
   border-radius: 20px;
   box-sizing: border-box;
   content: "";
@@ -3590,7 +3590,7 @@
 }
 .ods-date__selected:hover::after {
   align-items: center;
-  border: 1px solid #b6b9cc;
+  border: 1px solid #aaadc0;
   border-radius: 20px;
   content: "";
   display: flex;
@@ -3760,7 +3760,7 @@
   line-height: 1.5;
 }
 .ods-chart__legend__row__description-level-2 {
-  color: #b6b9cc;
+  color: #aaadc0;
   margin-left: 16px;
 }
 
@@ -3771,7 +3771,7 @@
   padding: 6px 0;
 }
 .ods-breadcrumb svg {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-breadcrumb__item {
   align-items: center;
@@ -3780,7 +3780,7 @@
 }
 .ods-breadcrumb span,
 .ods-breadcrumb a {
-  color: #b6b9cc;
+  color: #aaadc0;
   font-family: "Nunito Sans";
   font-size: 12px;
   font-weight: 600;
@@ -3870,7 +3870,7 @@
 .ods-drawer__content--header .ods-btn--primary {
   background: transparent;
   border: 0;
-  color: #b6b9cc;
+  color: #aaadc0;
   cursor: pointer;
   height: 100%;
   min-width: 0;
@@ -4197,7 +4197,7 @@
   transition: 200ms ease-in;
 }
 .ods-shortcut:is(:hover, :focus) {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-shortcut--disabled {
   background-color: rgba(235, 236, 245, 0.64);
@@ -4207,7 +4207,7 @@
 .ods-shortcut--disabled .ods-shortcut__icon,
 .ods-shortcut--disabled .ods-shortcut__label,
 .ods-shortcut--disabled .ods-shortcut__description {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-shortcut--tiny {
   min-width: 80px;
@@ -4265,7 +4265,7 @@
   top: 8px;
 }
 .ods-shortcut__blocked {
-  color: #b6b9cc;
+  color: #aaadc0;
   height: 16px;
   position: absolute;
   right: 8px;
@@ -4291,7 +4291,7 @@
   width: 320px;
 }
 .ods-card-list-item__leading-icon {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   border-radius: 50%;
   box-sizing: content-box;
   color: #5872f5;
@@ -4333,7 +4333,7 @@
 }
 .ods-card-list-item__action {
   background-color: transparent;
-  color: #b6b9cc;
+  color: #aaadc0;
   height: 20px;
   width: 20px;
 }
@@ -4345,7 +4345,7 @@
   width: 20px;
 }
 .ods-card-list-item:hover:not(.ods-card-list-item--disabled) {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
 }
 .ods-card-list-item:hover:not(.ods-card-list-item--disabled):not(.ods-card-list-item--size-small) .ods-card-list-item__leading-icon {
   background-color: rgba(184, 195, 255, 0.16);
@@ -4356,7 +4356,7 @@
 .ods-card-list-item--disabled .ods-card-list-item__content__title,
 .ods-card-list-item--disabled .ods-card-list-item__content__description,
 .ods-card-list-item--disabled .ods-card-list-item__content__caption {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-card-list-item--disabled .ods-card-list-item__leading-icon,
 .ods-card-list-item--disabled .ods-card-list-item__action {
@@ -4381,7 +4381,7 @@
   position: relative;
 }
 .ods-chips__button {
-  background: #f7f9ff;
+  background: #f3f5fe;
   border: 0;
   border-radius: 24px;
   color: #0025e0;
@@ -4408,17 +4408,17 @@
   width: 16px;
 }
 .ods-chips__button--disabled {
-  background: #f7f9ff;
+  background: #f3f5fe;
   pointer-events: none;
 }
 .ods-chips__button--disabled .ods-chips__label {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-chips__button--disabled .ods-chips__badge > .ods-badge__content {
-  background: #b6b9cc;
+  background: #aaadc0;
 }
 .ods-chips__button--disabled > svg {
-  color: #b6b9cc;
+  color: #aaadc0;
 }
 .ods-chips__button--active {
   background: #0025e0;
@@ -4488,13 +4488,13 @@
   width: 100%;
 }
 .ods-chips__options--option--selected {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   border-radius: 4px;
   color: #0025e0;
   font-weight: 700;
 }
 .ods-chips__options--option:hover {
-  background-color: #f7f9ff;
+  background-color: #f3f5fe;
   border-radius: 4px;
   color: #0025e0;
 }
@@ -4505,4 +4505,50 @@
   justify-content: space-between;
   padding: 16px 16px 16px 8px;
 }
+
+.ods-unordered-list-item {
+  align-items: flex-start;
+  display: flex;
+  gap: 8px;
+  list-style-type: none;
+}
+.ods-unordered-list-item__icon {
+  height: 24px;
+  min-height: 24px;
+  min-width: 24px;
+  width: 24px;
+}
+.ods-unordered-list-item__icon--solid {
+  height: 20px;
+  min-height: 20px;
+  min-width: 20px;
+  width: 20px;
+}
+.ods-unordered-list-item__icon-container {
+  align-items: center;
+  background-color: #f3f5fe;
+  border-radius: 50%;
+  display: flex;
+  gap: 8px;
+  height: 24px;
+  justify-content: center;
+  min-height: 24px;
+  min-width: 24px;
+  width: 24px;
+}
+.ods-unordered-list-item__icon-container svg {
+  fill: #5872f5;
+}
+.ods-unordered-list-item__title {
+  color: #0c0d14;
+  margin-bottom: 4px;
+}
+.ods-unordered-list-item__title--with-solid-icon {
+  font-size: 14px;
+}
+.ods-unordered-list-item__description {
+  align-items: center;
+  display: flex;
+  min-height: 24px;
+}
 /*# sourceMappingURL=ocean.css.map */