@useblu/ocean-core 1.126.0 → 1.128.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.128.0](https://github.com/ocean-ds/ocean-web/compare/v1.127.0...v1.128.0) (2026-02-04)
+
+### Features
+
+- create new Button variants ([#1222](https://github.com/ocean-ds/ocean-web/issues/1222)) ([7db9ec6](https://github.com/ocean-ds/ocean-web/commit/7db9ec6c24ea52241ebb63c2303c62937e3c27a3))
+
+# [1.127.0](https://github.com/ocean-ds/ocean-web/compare/v1.126.0...v1.127.0) (2026-01-14)
+
+### Features
+
+- include error message on radio ([#1216](https://github.com/ocean-ds/ocean-web/issues/1216)) ([6159438](https://github.com/ocean-ds/ocean-web/commit/6159438dadcf7058674da365e2b0d3b974859baf))
+
 # [1.126.0](https://github.com/ocean-ds/ocean-web/compare/v1.125.1...v1.126.0) (2026-01-14)
 
 ### Features

package/ocean.css

@@ -1628,6 +1628,11 @@
   position: absolute;
   width: 0;
 }
+.ods-radio__root-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 .ods-radio__root {
   display: flex;
   -webkit-user-select: none;
@@ -1657,6 +1662,13 @@
 .ods-radio__checkmark--error {
   border-color: #f5456e;
 }
+.ods-radio__error-message {
+  color: #f5456e;
+  font-family: "Nunito Sans";
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
 .ods-radio:checked ~ .ods-radio__checkmark {
   border-width: 6px;
 }
@@ -2225,6 +2237,20 @@
 .ods-btn--primary-critical:active {
   background-color: #d31441;
 }
+.ods-btn--primary-warning {
+  background-color: #ff8a14;
+  color: white;
+}
+.ods-btn--primary-warning:hover {
+  background-color: #ffa347;
+}
+.ods-btn--primary-warning:focus {
+  background-color: #ffa347;
+}
+.ods-btn--primary-warning:active {
+  background: linear-gradient(0deg, rgba(12, 13, 20, 0.12) 0%, rgba(12, 13, 20, 0.12) 100%), #ff8a14;
+  border-radius: 500px;
+}
 .ods-btn--secondary {
   background-color: #f3f5fe;
   color: #0025e0;
@@ -2243,32 +2269,114 @@
   color: #f5456e;
 }
 .ods-btn--secondary-critical:hover {
-  background-color: #f3f5fe;
+  background: linear-gradient(0deg, rgba(211, 20, 65, 0.08) 0%, rgba(211, 20, 65, 0.08) 100%), #fff1f4;
 }
 .ods-btn--secondary-critical:focus {
-  background-color: #f3f5fe;
+  background: linear-gradient(0deg, rgba(211, 20, 65, 0.08) 0%, rgba(211, 20, 65, 0.08) 100%), #fff1f4;
 }
 .ods-btn--secondary-critical:active {
-  background-color: #e0e2ee;
+  background: linear-gradient(0deg, rgba(211, 20, 65, 0.16) 0%, rgba(211, 20, 65, 0.16) 100%), #fff1f4;
+}
+.ods-btn--secondary-warning {
+  background-color: #fff7f0;
+  color: #ff8a14;
 }
-.ods-btn--tertiary, .ods-btn--tertiary-critical, .ods-btn--text, .ods-btn--text-critical {
+.ods-btn--secondary-warning:hover {
+  background: linear-gradient(0deg, rgba(255, 138, 20, 0.08) 0%, rgba(255, 138, 20, 0.08) 100%), #fff7f0;
+}
+.ods-btn--secondary-warning:focus {
+  background: linear-gradient(0deg, rgba(255, 138, 20, 0.08) 0%, rgba(255, 138, 20, 0.08) 100%), #fff7f0;
+}
+.ods-btn--secondary-warning:active {
+  background: linear-gradient(0deg, rgba(255, 138, 20, 0.16) 0%, rgba(255, 138, 20, 0.16) 100%), #fff7f0;
+}
+.ods-btn--text, .ods-btn--text-critical {
   background-color: transparent;
 }
-.ods-btn--tertiary:hover, .ods-btn--tertiary-critical:hover, .ods-btn--text:hover, .ods-btn--text-critical:hover {
+.ods-btn--text:hover, .ods-btn--text-critical:hover {
   background-color: #f3f5fe;
 }
-.ods-btn--tertiary:focus, .ods-btn--tertiary-critical:focus, .ods-btn--text:focus, .ods-btn--text-critical:focus {
+.ods-btn--text:focus, .ods-btn--text-critical:focus {
   background-color: #f3f5fe;
 }
-.ods-btn--tertiary:active, .ods-btn--tertiary-critical:active, .ods-btn--text:active, .ods-btn--text-critical:active {
+.ods-btn--text:active, .ods-btn--text-critical:active {
   background-color: #e0e2ee;
 }
-.ods-btn--tertiary, .ods-btn--text {
+.ods-btn--text {
+  color: #0025e0;
+}
+.ods-btn--text-critical {
+  color: #f5456e;
+}
+.ods-btn--tertiary, .ods-btn--tertiary-critical, .ods-btn--tertiary-warning {
+  background-color: transparent;
+  min-width: auto;
+  padding-left: 0;
+  padding-right: 0;
+}
+.ods-btn--tertiary {
   color: #0025e0;
 }
-.ods-btn--tertiary-critical, .ods-btn--text-critical {
+.ods-btn--tertiary.ods-btn--blocked:hover {
+  background-color: #f3f5fe;
+}
+.ods-btn--tertiary.ods-btn--blocked:focus {
+  background-color: #f3f5fe;
+}
+.ods-btn--tertiary.ods-btn--blocked:active {
+  background-color: #e0e2ee;
+}
+.ods-btn--tertiary:not(.ods-btn--blocked):hover {
+  color: #5872f5;
+}
+.ods-btn--tertiary:not(.ods-btn--blocked):focus {
+  color: #5872f5;
+}
+.ods-btn--tertiary:not(.ods-btn--blocked):active {
+  color: #0e248f;
+}
+.ods-btn--tertiary-critical {
   color: #f5456e;
 }
+.ods-btn--tertiary-critical.ods-btn--blocked:hover {
+  background: linear-gradient(0deg, rgba(211, 20, 65, 0.08) 0%, rgba(211, 20, 65, 0.08) 100%), #fff1f4;
+}
+.ods-btn--tertiary-critical.ods-btn--blocked:focus {
+  background: linear-gradient(0deg, rgba(211, 20, 65, 0.08) 0%, rgba(211, 20, 65, 0.08) 100%), #fff1f4;
+}
+.ods-btn--tertiary-critical.ods-btn--blocked:active {
+  background: linear-gradient(0deg, rgba(211, 20, 65, 0.16) 0%, rgba(211, 20, 65, 0.16) 100%), #fff1f4;
+}
+.ods-btn--tertiary-critical:not(.ods-btn--blocked):hover {
+  color: #f27592;
+}
+.ods-btn--tertiary-critical:not(.ods-btn--blocked):focus {
+  color: #f27592;
+}
+.ods-btn--tertiary-critical:not(.ods-btn--blocked):active {
+  color: #d31441;
+}
+.ods-btn--tertiary-warning {
+  color: #ff8a14;
+}
+.ods-btn--tertiary-warning.ods-btn--blocked:hover {
+  background-color: #fff7f0;
+}
+.ods-btn--tertiary-warning.ods-btn--blocked:focus {
+  background-color: #fff7f0;
+}
+.ods-btn--tertiary-warning.ods-btn--blocked:active {
+  background: linear-gradient(0deg, rgba(255, 138, 20, 0.16) 0%, rgba(255, 138, 20, 0.16) 100%), #fff7f0;
+}
+.ods-btn--tertiary-warning:not(.ods-btn--blocked):hover {
+  color: #ffbd7a;
+}
+.ods-btn--tertiary-warning:not(.ods-btn--blocked):focus {
+  color: #ffbd7a;
+}
+.ods-btn--tertiary-warning:not(.ods-btn--blocked):active {
+  color: #ff8a14;
+}
 .ods-btn--text-tertiary, .ods-btn--text-tertiary-critical {
   background-color: transparent;
   min-width: auto;