From 84451d0abcae85ab0bffc5f01a715f52c2d43cdb Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 25 Apr 2026 02:54:23 +0200
Subject: [PATCH] feat(calc-01): add distinct styles for backspace and escape
 keys

---
 samples/calc-01/index.css | 12 ++++++++++++
 samples/calc-01/index.js  |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/samples/calc-01/index.css b/samples/calc-01/index.css
index 02cd350..12d854d 100644
--- a/samples/calc-01/index.css
+++ b/samples/calc-01/index.css
@@ -17,6 +17,10 @@
   --key-op-bottom: #304661;
   --key-danger-top: #7a5050;
   --key-danger-bottom: #553636;
+  --key-soft-danger-top: #86605a;
+  --key-soft-danger-bottom: #61433e;
+  --key-cancel-top: #5f6b7c;
+  --key-cancel-bottom: #3f4857;
   --key-enter-top: #7d9079;
   --key-enter-bottom: #4d614b;
   --border: #11151c;
@@ -325,6 +329,14 @@ button:active {
   background: linear-gradient(180deg, var(--key-danger-top), var(--key-danger-bottom));
 }
 
+.key-soft-danger {
+  background: linear-gradient(180deg, var(--key-soft-danger-top), var(--key-soft-danger-bottom));
+}
+
+.key-cancel {
+  background: linear-gradient(180deg, var(--key-cancel-top), var(--key-cancel-bottom));
+}
+
 .key-enter {
   background: linear-gradient(180deg, var(--key-enter-top), var(--key-enter-bottom));
   grid-row: span 2;
diff --git a/samples/calc-01/index.js b/samples/calc-01/index.js
index 3530537..09fd991 100644
--- a/samples/calc-01/index.js
+++ b/samples/calc-01/index.js
@@ -87,8 +87,8 @@ const topButtons = {
     { type: 'command', value: 'e', label: 'e', className: 'key-function' },
   ],
   del: { type: 'command', value: 'clear', label: 'DEL', className: 'key-danger' },
-  backspace: { type: 'action', value: 'backspace', label: '⌫', className: 'key-danger' },
-  escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-danger' },
+  backspace: { type: 'action', value: 'backspace', label: '⌫', className: 'key-soft-danger' },
+  escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-cancel' },
 };
 
 let stackCursor = null;