@useblu/ocean-core 1.62.2 → 1.63.1

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.63.1](https://github.com/ocean-ds/ocean-web/compare/v1.63.0...v1.63.1) (2024-06-20)
+
+### Bug Fixes
+
+- adjust breadcrumb and typography ([#1110](https://github.com/ocean-ds/ocean-web/issues/1110)) ([75860e4](https://github.com/ocean-ds/ocean-web/commit/75860e4bc7ea0cb8bdead4fbe7f776ad5244d54b))
+
+# [1.63.0](https://github.com/ocean-ds/ocean-web/compare/v1.62.2...v1.63.0) (2024-06-20)
+
+### Features
+
+- update typography ([#1109](https://github.com/ocean-ds/ocean-web/issues/1109)) ([aed315b](https://github.com/ocean-ds/ocean-web/commit/aed315be06fc0188481a278a5996be6d44d3bb90))
+
 ## [1.62.2](https://github.com/ocean-ds/ocean-web/compare/v1.62.1...v1.62.2) (2024-06-18)
 
 **Note:** Version bump only for package @useblu/ocean-core

package/ocean.css

@@ -1093,7 +1093,7 @@
   font-family: "Nunito Sans";
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.1;
+  line-height: 1.24;
   margin-bottom: 8px;
 }
 .ods-form-label--disabled {
@@ -1324,21 +1324,21 @@
   align-items: center;
   background-color: white;
   border: 1px solid #ced1e1;
-  border-radius: 4px;
+  border-radius: 8px;
   box-sizing: border-box;
   display: flex;
   height: 48px;
 }
 .ods-input input {
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 8px;
   box-sizing: border-box;
   color: #393b47;
   font-family: "Nunito Sans";
   font-size: 16px;
   font-weight: 400;
   height: 100%;
-  line-height: 1.1;
+  line-height: 1.24;
   outline: none;
   padding: 0 16px;
   width: 100%;
@@ -1438,13 +1438,13 @@
 .ods-textarea {
   background-color: white;
   border: 1px solid #ced1e1;
-  border-radius: 4px;
+  border-radius: 8px;
   box-sizing: border-box;
   color: #393b47;
   font-family: "Nunito Sans";
   font-size: 16px;
   font-weight: 400;
-  line-height: 1.1;
+  line-height: 1.24;
   outline: none;
   padding: 16px;
   resize: none;
@@ -1502,7 +1502,7 @@
 .ods-checkbox__checkmark {
   background-color: white;
   border: solid 1px #aaadc0;
-  border-radius: 4px;
+  border-radius: 8px;
   box-sizing: border-box;
   cursor: pointer;
   height: 20px;
@@ -1626,7 +1626,7 @@
 .ods-switch__slider {
   background-color: white;
   border: solid 1px #aaadc0;
-  border-radius: 500px;
+  border-radius: 56px;
   bottom: 0;
   box-sizing: border-box;
   cursor: pointer;
@@ -1677,7 +1677,7 @@
   align-items: center;
   background-color: white;
   border: solid 1px #ced1e1;
-  border-radius: 4px;
+  border-radius: 8px;
   color: #393b47;
   cursor: pointer;
   display: flex;
@@ -1740,7 +1740,7 @@
 .ods-select__listbox {
   background-color: white;
   border: solid 1px #ced1e1;
-  border-radius: 4px;
+  border-radius: 8px;
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   list-style: none;
   margin: 0;
@@ -1764,7 +1764,7 @@
   font-size: 14px;
   font-weight: 400;
   height: 40px;
-  line-height: 1.1;
+  line-height: 1.24;
   list-style: none;
   margin: 0;
   min-width: 0;
@@ -1788,7 +1788,7 @@
 .ods-alert {
   align-items: flex-start;
   background-color: #f3f5fe;
-  border-radius: 8px;
+  border-radius: 12px;
   color: #67697a;
   display: flex;
   flex-direction: column;
@@ -1952,7 +1952,7 @@
 
 .ods-btn {
   border: 0;
-  border-radius: 500px;
+  border-radius: 56px;
   cursor: pointer;
   font-family: "Nunito Sans";
   font-weight: 700;
@@ -2821,20 +2821,20 @@
   align-items: center;
   background-color: white;
   border: 1px solid #ced1e1;
-  border-radius: 4px;
+  border-radius: 8px;
   display: flex;
   height: 46px;
   width: 100%;
 }
 .ods-search input {
   border: 0;
-  border-radius: 4px;
+  border-radius: 8px;
   box-sizing: border-box;
   color: #393b47;
   font-size: 16px;
   font-weight: 400;
   height: 100%;
-  line-height: 1.1;
+  line-height: 1.24;
   outline: none;
   padding: 0 8px;
   width: 100%;
@@ -2994,57 +2994,53 @@
   margin: 0;
 }
 .ods-typography__heading1 {
-  color: #0c0d14;
-  font-family: "Avenir";
+  color: #393b47;
+  font-family: "Nunito Sans";
   font-weight: 800;
-  line-height: 1.1;
   font-size: 32px;
+  line-height: 1.24;
 }
 .ods-typography__heading2 {
-  color: #0c0d14;
-  font-family: "Avenir";
+  color: #393b47;
+  font-family: "Nunito Sans";
   font-weight: 800;
-  line-height: 1.1;
   font-size: 24px;
+  line-height: 1.24;
 }
 .ods-typography__heading3 {
-  color: #0c0d14;
-  font-family: "Avenir";
+  color: #393b47;
+  font-family: "Nunito Sans";
   font-weight: 800;
-  line-height: 1.1;
   font-size: 20px;
+  line-height: 1.24;
 }
 .ods-typography__heading4 {
-  color: #0c0d14;
-  font-family: "Avenir";
+  color: #393b47;
+  font-family: "Nunito Sans";
   font-weight: 800;
-  line-height: 1.1;
   font-size: 16px;
-  font-weight: 700;
-  line-height: 1.1;
+  line-height: 1.32;
 }
 .ods-typography__heading5 {
-  color: #0c0d14;
-  font-family: "Avenir";
+  color: #393b47;
+  font-family: "Nunito Sans";
   font-weight: 800;
-  line-height: 1.1;
   font-size: 14px;
-  font-weight: 700;
-  line-height: 1.1;
+  line-height: 1.32;
 }
 .ods-typography__subtitle1 {
   color: #67697a;
   font-family: "Nunito Sans";
   font-weight: 400;
-  line-height: 1.1;
-  font-size: 24px;
+  line-height: 1.32;
+  font-size: 20px;
 }
 .ods-typography__subtitle2 {
   color: #67697a;
   font-family: "Nunito Sans";
   font-weight: 400;
-  line-height: 1.1;
-  font-size: 20px;
+  line-height: 1.32;
+  font-size: 16px;
 }
 .ods-typography__paragraph {
   color: #67697a;
@@ -3058,6 +3054,7 @@
   font-family: "Nunito Sans";
   font-size: 20px;
   font-weight: 700;
+  line-height: 1.5;
 }
 .ods-typography__description {
   color: #67697a;
@@ -3067,12 +3064,28 @@
   font-size: 14px;
 }
 .ods-typography__caption {
+  color: #67697a;
+  font-family: "Nunito Sans";
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 12px;
+}
+.ods-typography__captionbold {
   color: #67697a;
   font-family: "Nunito Sans";
   font-size: 12px;
   font-weight: 600;
   line-height: 1.5;
 }
+.ods-typography__eyebrow {
+  color: #67697a;
+  font-family: "Nunito Sans";
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.8px;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
 .ods-typography--inverse {
   color: white;
 }
@@ -3337,7 +3350,7 @@
 }
 .ods-topbar-title {
   font-weight: 800;
-  line-height: 1.1;
+  line-height: 1.24;
   margin-left: 16px;
   margin-right: 16px;
   width: 100%;
@@ -3361,7 +3374,7 @@
 }
 
 .ods-cross-sell-card {
-  border-radius: 8px;
+  border-radius: 12px;
   min-height: 156px;
   width: 100%;
 }
@@ -3370,7 +3383,7 @@
   background-color: #0025e0;
   border: 1px solid #e0e2ee;
   border-bottom: 0;
-  border-radius: 8px 8px 0 0;
+  border-radius: 12px 12px 0 0;
   display: flex;
   gap: 16px;
   justify-content: center;
@@ -3385,13 +3398,12 @@
   min-width: 80px;
 }
 .ods-cross-sell-card__title {
-  color: #0c0d14;
-  font-family: "Avenir";
+  color: #393b47;
+  font-family: "Nunito Sans";
   font-weight: 800;
-  line-height: 1.1;
   color: white;
   font-size: 20px;
-  line-height: 1.1;
+  line-height: 1.24;
 }
 @media (max-width: 767.98px) {
   .ods-cross-sell-card__title {
@@ -3419,7 +3431,7 @@
   align-items: center;
   background: white;
   border: 1px solid #e0e2ee;
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 12px 12px;
   border-top: 0;
   color: #0025e0;
   display: flex;
@@ -3515,7 +3527,7 @@
 .ods-date__calendar {
   background-color: white;
   border: 1px solid #e0e2ee;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   box-sizing: border-box;
   margin: 0;
@@ -3805,7 +3817,7 @@
   font-family: "Nunito Sans";
   font-size: 20px;
   font-weight: 600;
-  line-height: 1.1;
+  line-height: 1.24;
   text-align: center;
 }
 .ods-chart__canvas__center-legend .ods-typography__description {
@@ -3842,7 +3854,7 @@
   justify-content: center;
 }
 .ods-chart__legend__row__description-circle {
-  border-radius: 8px;
+  border-radius: 12px;
   height: 8px;
   margin-right: 8px;
   width: 8px;
@@ -3865,9 +3877,16 @@
 .ods-breadcrumb {
   align-items: center;
   display: flex;
+  font-family: "Nunito Sans";
+  font-size: 12px;
   gap: 4px;
   padding: 6px 0;
 }
+@media (max-width: 576px) {
+  .ods-breadcrumb {
+    padding: 10px 0;
+  }
+}
 .ods-breadcrumb svg {
   color: #aaadc0;
 }
@@ -3880,10 +3899,15 @@
   background: none;
   border: transparent;
   outline: 1px solid transparent;
+  padding: 0;
+}
+.ods-breadcrumb button svg {
+  color: #67697a;
 }
 .ods-breadcrumb span,
 .ods-breadcrumb button,
 .ods-breadcrumb a {
+  background-color: transparent;
   color: #aaadc0;
   font-family: "Nunito Sans";
   font-size: 12px;
@@ -4004,7 +4028,7 @@
 .ods-snackbar {
   align-items: center;
   background: #393b47;
-  border-radius: 4px;
+  border-radius: 8px;
   display: flex;
   min-height: 56px;
   position: fixed;
@@ -4302,7 +4326,7 @@
   align-items: flex-start;
   background-color: white;
   border: 1px solid #e0e2ee;
-  border-radius: 8px;
+  border-radius: 12px;
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -4396,7 +4420,7 @@
 .ods-card-list-item {
   align-items: center;
   border: 1px solid #e0e2ee;
-  border-radius: 8px;
+  border-radius: 12px;
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -4553,7 +4577,7 @@
 .ods-chips__options {
   background: white;
   border: 1px solid #e0e2ee;
-  border-radius: 4px;
+  border-radius: 8px;
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   display: flex;
   flex-direction: column;
@@ -4605,13 +4629,13 @@
 }
 .ods-chips__options--option--selected {
   background-color: #f3f5fe;
-  border-radius: 4px;
+  border-radius: 8px;
   color: #0025e0;
   font-weight: 700;
 }
 .ods-chips__options--option:hover {
   background-color: #f3f5fe;
-  border-radius: 4px;
+  border-radius: 8px;
   color: #0025e0;
 }
 .ods-chips__options--footer {