@useblu/ocean-core 1.65.0 → 1.67.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.67.0](https://github.com/ocean-ds/ocean-web/compare/v1.66.0...v1.67.0) (2024-07-15)
+
+### Features
+
+- update input ([#1114](https://github.com/ocean-ds/ocean-web/issues/1114)) ([114d564](https://github.com/ocean-ds/ocean-web/commit/114d5640cf22d553216363c19cde717c6ed8726a))
+
+# [1.66.0](https://github.com/ocean-ds/ocean-web/compare/v1.65.0...v1.66.0) (2024-07-02)
+
+### Features
+
+- update alert ([#1115](https://github.com/ocean-ds/ocean-web/issues/1115)) ([3386652](https://github.com/ocean-ds/ocean-web/commit/338665214afa9268e8e09c0d71812a40fab8ab0b))
+
 # [1.65.0](https://github.com/ocean-ds/ocean-web/compare/v1.64.0...v1.65.0) (2024-06-26)
 
 ### Features

package/ocean.css

@@ -1059,10 +1059,11 @@
   margin-right: 4px;
 }
 .ods-form-control__element {
-  max-height: 69.19px;
+  max-height: 145px;
 }
 .ods-form-control__icon {
   align-items: start;
+  color: #aaadc0;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1077,7 +1078,8 @@
   color: #aaadc0;
   font-size: 12px;
   font-weight: 600;
-  line-height: 1;
+  line-height: 1.32;
+  margin-bottom: 0;
   margin-top: 4px;
 }
 .ods-form-control__helper-text--error {
@@ -1093,11 +1095,10 @@
   font-family: "Nunito Sans";
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.24;
-  margin-bottom: 8px;
+  line-height: 1;
 }
 .ods-form-label--disabled {
-  color: #aaadc0;
+  color: #ced1e1;
 }
 
 .ods-file-uploader {
@@ -1330,8 +1331,8 @@
   height: 48px;
 }
 .ods-input input {
-  border: 1px solid transparent;
   border-radius: 8px;
+  border-width: 0;
   box-sizing: border-box;
   color: #393b47;
   font-family: "Nunito Sans";
@@ -1361,9 +1362,7 @@
 .ods-input:hover, .ods-input:focus, .ods-input:active, .ods-input:focus-within {
   border-color: #5872f5;
   border-width: 2px;
-}
-.ods-input:hover input, .ods-input:focus input, .ods-input:active input, .ods-input:focus-within input {
-  border-width: 0;
+  margin: 0 -1px;
 }
 .ods-input--filled {
   border: 1px solid #b8c3ff;
@@ -1371,18 +1370,6 @@
 .ods-input--error {
   border-color: #f5456e;
 }
-.ods-input--disabled {
-  background-color: #e0e2ee;
-  border-color: #e0e2ee;
-  cursor: not-allowed;
-}
-.ods-input--disabled input {
-  color: #aaadc0;
-  cursor: not-allowed;
-}
-.ods-input--disabled:hover, .ods-input--disabled:focus, .ods-input--disabled:active {
-  border-color: #5872f5;
-}
 .ods-input__adornment {
   align-items: center;
   color: #393b47;
@@ -1390,12 +1377,36 @@
   height: 100%;
   padding-right: 16px;
 }
+.ods-input__adornment--start {
+  color: #393b47;
+}
 .ods-input__adornment--placeholder {
   color: #ced1e1;
 }
 .ods-input__adornment input {
   padding: 0 4px;
 }
+.ods-input__adornment svg {
+  color: #aaadc0;
+}
+.ods-input--disabled {
+  background-color: #f3f5fe;
+  border: 1px solid #f3f5fe;
+  color: #ced1e1;
+  cursor: not-allowed;
+}
+.ods-input--disabled input {
+  background-color: #f3f5fe;
+  color: #ced1e1;
+  cursor: not-allowed;
+}
+.ods-input--disabled svg {
+  color: #ced1e1;
+}
+.ods-input--disabled:hover, .ods-input--disabled:focus, .ods-input--disabled:active, .ods-input--disabled:focus-within {
+  border: 1px solid #f3f5fe;
+  margin: 0;
+}
 .ods-input--left {
   flex-direction: row-reverse;
 }
@@ -1408,6 +1419,9 @@
 .ods-input--right .ods-input__adornment {
   margin-left: -12px;
 }
+.ods-input--adornment input {
+  padding: 0 4px;
+}
 
 .ods-input--amount .ods-input--root {
   align-items: center;
@@ -1434,17 +1448,33 @@
 .ods-input--amount__stepper-controls_minus {
   padding-left: 4px;
 }
+.ods-input--amount .ods-input--amount--zero svg {
+  color: #ced1e1;
+}
+.ods-input--amount .ods-input--amount--zero input {
+  color: #ced1e1;
+}
+.ods-input--amount .ods-input--amount--zero:hover svg,
+.ods-input--amount .ods-input--amount--zero:focus svg {
+  color: #393b47;
+}
+
+.ods-input--amount--disabled:hover svg {
+  color: #ced1e1;
+}
 
 .ods-textarea {
   background-color: white;
-  border: 1px solid #ced1e1;
+  border: hidden;
   border-radius: 8px;
+  box-shadow: 0 0 0 1px #ced1e1;
   box-sizing: border-box;
   color: #393b47;
   font-family: "Nunito Sans";
   font-size: 16px;
   font-weight: 400;
-  line-height: 1.24;
+  height: 145px;
+  line-height: 1.5;
   outline: none;
   padding: 16px;
   resize: none;
@@ -1460,22 +1490,20 @@
   color: #ced1e1;
 }
 .ods-textarea:hover, .ods-textarea:focus, .ods-textarea:active, .ods-textarea:focus-within {
-  border: 2px solid #5872f5;
+  box-shadow: 0 0 0 2px #5872f5;
 }
 .ods-textarea:disabled {
-  background-color: #e0e2ee;
-  border-color: #e0e2ee;
-  color: #aaadc0;
+  background-color: #f3f5fe;
+  border: hidden;
+  box-shadow: 0 0 0 1px #f3f5fe;
+  color: #ced1e1;
   cursor: not-allowed;
 }
-.ods-textarea:disabled:active {
-  border-color: #e0e2ee;
-}
 .ods-textarea--filled {
-  border: 1px solid #b8c3ff;
+  box-shadow: 0 0 0 1px #b8c3ff;
 }
 .ods-textarea--error {
-  border-color: #f5456e;
+  box-shadow: 0 0 0 1px #f5456e;
 }
 
 .ods-checkbox {
@@ -1670,7 +1698,6 @@
 }
 
 .ods-select__root {
-  margin: 1px;
   min-width: 237px;
 }
 .ods-select__control {
@@ -1698,9 +1725,9 @@
   padding-right: 15px;
 }
 .ods-select__control:disabled {
-  background-color: #e0e2ee;
-  border-color: #e0e2ee;
-  color: #aaadc0;
+  background-color: #f3f5fe;
+  border-color: #f3f5fe;
+  color: #ced1e1;
   cursor: not-allowed;
 }
 .ods-select__control--filled {
@@ -1720,19 +1747,6 @@
 .ods-select__value--empty {
   color: #ced1e1;
 }
-.ods-select__arrow {
-  display: flex;
-  justify-self: center;
-}
-.ods-select__arrow--up {
-  transform: rotate(-180deg);
-}
-.ods-select__arrow--down {
-  transform: rotate(0);
-}
-.ods-select__arrow--disabled {
-  color: #aaadc0;
-}
 .ods-select__listbox-wrapper {
   position: relative;
   z-index: 2;
@@ -1756,15 +1770,15 @@
 }
 .ods-select__option {
   align-items: center;
-  color: #393b47;
+  color: #67697a;
   cursor: pointer;
   display: flex;
   flex: 1;
-  font-family: "Avenir";
+  font-family: "Nunito Sans";
   font-size: 14px;
   font-weight: 400;
   height: 40px;
-  line-height: 1.24;
+  line-height: 1.5;
   list-style: none;
   margin: 0;
   min-width: 0;
@@ -1776,19 +1790,137 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.ods-select__option--selected, .ods-select__option:hover, .ods-select__option:focus, .ods-select__option:active {
+.ods-select__option--selected {
   background-color: #f3f5fe;
   color: #0025e0;
-  font-weight: 700;
+  font-weight: 600;
 }
-.ods-select__option:hover:not(.ods-select__option--selected) {
+.ods-select__option:hover:not(.ods-select__option--selected, .ods-select__option--disabled), .ods-select__option:focus:not(.ods-select__option--selected, .ods-select__option--disabled), .ods-select__option:active:not(.ods-select__option--selected, .ods-select__option--disabled) {
+  background-color: #f3f5fe;
+  color: #67697a;
   font-weight: 400;
 }
+.ods-select__option--disabled {
+  background-color: white;
+  color: #aaadc0;
+  cursor: not-allowed;
+}
+
+.ods-select__arrow {
+  display: flex;
+  justify-self: center;
+}
+.ods-select__arrow svg {
+  color: #67697a;
+  height: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  width: 20px;
+}
+.ods-select__arrow--down svg {
+  transform: rotate(0);
+  transition: transform 0.3s;
+}
+.ods-select__arrow--up svg {
+  transform: rotate(-180deg);
+  transition: transform 0.3s;
+}
+.ods-select__arrow--disabled {
+  color: #ced1e1;
+}
+.ods-select__arrow--disabled svg {
+  color: #ced1e1;
+}
+
+.ods-token-input {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-start;
+}
+.ods-token-input__input {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #ced1e1;
+  box-sizing: border-box;
+  height: 48px;
+  width: 48px;
+}
+.ods-token-input__input:hover, .ods-token-input__input:focus, .ods-token-input__input:active, .ods-token-input__input:focus-within {
+  box-shadow: 0 0 0 2px #5872f5;
+}
+.ods-token-input input {
+  border: hidden;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #393b47;
+  font-family: "Nunito Sans";
+  font-size: 16px;
+  font-weight: 400;
+  height: 100%;
+  line-height: 1.24;
+  outline: none;
+  text-align: center;
+  width: 100%;
+}
+.ods-token-input--error {
+  box-shadow: 0 0 0 1px #f5456e;
+}
+.ods-token-input--disabled {
+  background-color: #f3f5fe;
+  border: hidden;
+  box-shadow: 0 0 0 1px #f3f5fe;
+}
+.ods-token-input--disabled input {
+  background-color: #f3f5fe;
+  color: #ced1e1;
+  cursor: not-allowed;
+}
+.ods-token-input--disabled:hover, .ods-token-input--disabled:focus, .ods-token-input--disabled:active {
+  box-shadow: 0 0 0 1px #f3f5fe;
+}
+
+.ods-select-autocomplete__root {
+  min-width: 237px;
+}
+.ods-select-autocomplete__listbox--empty {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 12px 0;
+}
+.ods-select-autocomplete__listbox--empty .ods-typography__description {
+  color: #aaadc0;
+}
+
+.ods-select-autocomplete__arrow {
+  justify-self: center;
+}
+.ods-select-autocomplete__arrow svg {
+  color: #67697a;
+  height: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  width: 20px;
+}
+.ods-select-autocomplete__arrow--up svg {
+  transform: rotate(-180deg);
+  transition: transform 0.3s;
+}
+.ods-select-autocomplete__arrow--down svg {
+  transform: rotate(0);
+  transition: transform 0.3s;
+}
+.ods-select-autocomplete__arrow--disabled {
+  color: #ced1e1;
+}
+.ods-select-autocomplete__arrow--disabled svg {
+  color: #ced1e1;
+}
 
 .ods-alert {
   align-items: flex-start;
   background-color: #f3f5fe;
-  border-radius: 12px;
+  border-radius: 8px;
   color: #67697a;
   display: flex;
   flex-direction: column;
@@ -1800,10 +1932,18 @@
   padding: 16px;
 }
 @media (min-width: 576px) {
+  .ods-alert {
+    flex-direction: row;
+  }
   .ods-alert__button--mobile {
     display: none;
   }
 }
+@media (min-width: 576px) {
+  .ods-alert--with-button-no-title {
+    font-size: 14px;
+  }
+}
 .ods-alert--error {
   background-color: #fff1f4;
 }
@@ -1816,9 +1956,20 @@
 .ods-alert--error .ods-btn {
   background-color: #f5456e;
 }
+.ods-alert--error .ods-btn--primary:hover,
+.ods-alert--error .ods-btn--primary:focus {
+  background-color: #f27592;
+}
+.ods-alert--error .ods-btn--primary:active {
+  background-color: #d31441;
+}
 .ods-alert--error .ods-link {
   color: #f5456e;
 }
+.ods-alert--error .ods-link:hover,
+.ods-alert--error .ods-link:focus {
+  color: #f27592;
+}
 .ods-alert--warning {
   background-color: #fff7f0;
 }
@@ -1831,9 +1982,20 @@
 .ods-alert--warning .ods-btn {
   background-color: #ff8a14;
 }
+.ods-alert--warning .ods-btn--primary:hover,
+.ods-alert--warning .ods-btn--primary:focus {
+  background-color: #ffbd7a;
+}
+.ods-alert--warning .ods-btn--primary:active {
+  background-color: #ff8a14;
+}
 .ods-alert--warning .ods-link {
   color: #ff8a14;
 }
+.ods-alert--warning .ods-link:hover,
+.ods-alert--warning .ods-link:focus {
+  color: #ffbd7a;
+}
 .ods-alert--success {
   background-color: #f2fdf5;
 }
@@ -1846,13 +2008,25 @@
 .ods-alert--success .ods-btn {
   background-color: #2da94f;
 }
+.ods-alert--success .ods-btn--primary:hover,
+.ods-alert--success .ods-btn--primary:focus {
+  background-color: #7adc94;
+}
+.ods-alert--success .ods-btn--primary:active {
+  background-color: #2da94f;
+}
 .ods-alert--success .ods-link {
   color: #2da94f;
 }
+.ods-alert--success .ods-link:hover,
+.ods-alert--success .ods-link:focus {
+  color: #7adc94;
+}
 .ods-alert__text {
   display: flex;
   flex: 1;
   flex-direction: column;
+  gap: 4px;
 }
 .ods-alert__icon {
   margin-right: 8px;
@@ -1865,7 +2039,7 @@
   }
 }
 .ods-alert__button--mobile {
-  margin-top: 8px;
+  margin: 12px 0 0 32px;
 }
 .ods-alert__button .ods-btn {
   margin-left: 16px;
@@ -1882,8 +2056,11 @@
 .ods-alert__title {
   color: #5872f5;
   font-size: 14px;
-  font-weight: 700;
-  line-height: 1.5;
+  font-weight: 800;
+  line-height: 1.32;
+}
+.ods-alert__content--no-title {
+  padding-top: 0;
 }
 
 .ods-badge {
@@ -2370,12 +2547,12 @@
   width: 48px;
 }
 .ods-icon-btn--disabled {
-  color: #aaadc0;
+  color: #ced1e1;
   cursor: not-allowed;
 }
-.ods-icon-btn--disabled:hover {
+.ods-icon-btn--disabled:hover, .ods-icon-btn--disabled:active, .ods-icon-btn--disabled:focus {
   background-color: inherit;
-  color: #aaadc0;
+  color: #ced1e1;
 }
 
 .ods-link {
@@ -4772,8 +4949,6 @@
   font-size: 14px;
 }
 .ods-unordered-list-item__description {
-  align-items: center;
-  display: flex;
   min-height: 24px;
 }