@useblu/ocean-core 1.127.0 → 1.128.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.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

package/ocean.css

@@ -2237,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;
@@ -2255,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--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--tertiary, .ods-btn--tertiary-critical, .ods-btn--text, .ods-btn--text-critical {
+.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--tertiary-critical, .ods-btn--text-critical {
+.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.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;